

<!DOCTYPE html>
<html lang="zh-CN" data-default-color-scheme=&#34;auto&#34;>



<head>
  <meta charset="UTF-8">
  <link rel="apple-touch-icon" sizes="76x76" href="/blog/img/favicon.png">
  <link rel="icon" href="/blog/img/favicon.jpg">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  
  <meta name="theme-color" content="#2f4154">
  <meta name="description" content="">
  <meta name="author" content="John Doe">
  <meta name="keywords" content="">
  
  <title>Vue基础 - ITaylorfan的小站</title>

  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" />


  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/github-markdown-css@4.0.0/github-markdown.min.css" />
  <link  rel="stylesheet" href="/blog/lib/hint/hint.min.css" />

  
    
    
      
      <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@10.7.2/styles/github-gist.min.css" />
    
  

  
    <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
  



<!-- 主题依赖的图标库，不要自行修改 -->

<link rel="stylesheet" href="//at.alicdn.com/t/font_1749284_ba1fz6golrf.css">



<link rel="stylesheet" href="//at.alicdn.com/t/font_1736178_kmeydafke9r.css">


<link  rel="stylesheet" href="/blog/css/main.css" />

<!-- 自定义样式保持在最底部 -->


  <script id="fluid-configs">
    var Fluid = window.Fluid || {};
    var CONFIG = {"hostname":"itaylorfan.gitee.io","root":"/blog/","version":"1.8.11","typing":{"enable":true,"typeSpeed":70,"cursorChar":"❤","loop":false},"anchorjs":{"enable":true,"element":"h1,h2,h3,h4,h5,h6","placement":"right","visible":"hover","icon":""},"progressbar":{"enable":true,"height_px":3,"color":"#29d","options":{"showSpinner":false,"trickleSpeed":100}},"copy_btn":true,"image_zoom":{"enable":true,"img_url_replace":["",""]},"toc":{"enable":true,"headingSelector":"h1,h2,h3,h4,h5,h6","collapseDepth":0},"lazyload":{"enable":true,"loading_img":"/img/loading.gif","onlypost":false,"offset_factor":2},"web_analytics":{"enable":false,"baidu":null,"google":null,"gtag":null,"tencent":{"sid":null,"cid":null},"woyaola":null,"cnzz":null,"leancloud":{"app_id":null,"app_key":null,"server_url":null}},"search_path":"/local-search.xml"};
  </script>
  <script  src="/blog/js/utils.js" ></script>
  <script  src="/blog/js/color-schema.js" ></script>
<meta name="generator" content="Hexo 5.4.0"></head>


<body>
  <header style="height: 85vh;">
    <nav id="navbar" class="navbar fixed-top  navbar-expand-lg navbar-dark scrolling-navbar">
  <div class="container">
    <a class="navbar-brand"
       href="/blog/">&nbsp;<strong>ITaylorfan</strong>&nbsp;</a>

    <button id="navbar-toggler-btn" class="navbar-toggler" type="button" data-toggle="collapse"
            data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <div class="animated-icon"><span></span><span></span><span></span></div>
    </button>

    <!-- Collapsible content -->
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto text-center">
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/blog/">
                <i class="iconfont icon-home-fill"></i>
                首页
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/blog/archives/">
                <i class="iconfont icon-archive-fill"></i>
                归档
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/blog/categories/">
                <i class="iconfont icon-category-fill"></i>
                分类
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/blog/tags/">
                <i class="iconfont icon-tags-fill"></i>
                标签
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/blog/about/">
                <i class="iconfont icon-user-fill"></i>
                关于
              </a>
            </li>
          
        
        
          <li class="nav-item" id="search-btn">
            <a class="nav-link" target="_self" data-toggle="modal" data-target="#modalSearch">&nbsp;<i
                class="iconfont icon-search"></i>&nbsp;</a>
          </li>
        
        
          <li class="nav-item" id="color-toggle-btn">
            <a class="nav-link" target="_self">&nbsp;<i
                class="iconfont icon-dark" id="color-toggle-icon"></i>&nbsp;</a>
          </li>
        
      </ul>
    </div>
  </div>
</nav>

    <div class="banner" id="banner" parallax=true
         style="background: url('/blog/img/TS8-10-9.jpg') no-repeat center center;
           background-size: cover;">
      <div class="full-bg-img">
        <div class="mask flex-center" style="background-color: rgba(0, 0, 0, 0.3)">
          <div class="page-header text-center fade-in-up">
            <span class="h2" id="subtitle" title="Vue基础">
              
            </span>

            
              <div class="mt-3">
  
  
    <span class="post-meta">
      <i class="iconfont icon-date-fill" aria-hidden="true"></i>
      <time datetime="2021-11-30 09:00" pubdate>
        2021年11月30日 上午
      </time>
    </span>
  
</div>

<div class="mt-1">
  
    
    <span class="post-meta mr-2">
      <i class="iconfont icon-chart"></i>
      29.4k 字
    </span>
  

  
    
    <span class="post-meta mr-2">
      <i class="iconfont icon-clock-fill"></i>
      
      
      441
       分钟
    </span>
  

  
  
</div>

            
          </div>

          
            <div class="scroll-down-bar">
              <i class="iconfont icon-arrowdown"></i>
            </div>
          
        </div>
      </div>
    </div>
  </header>

  <main>
    
      

<div class="container-fluid nopadding-x">
  <div class="row nomargin-x">
    <div class="d-none d-lg-block col-lg-2"></div>
    <div class="col-lg-8 nopadding-x-md">
      <div class="container nopadding-x-md" id="board-ctn">
        <div class="py-5" id="board">
          <article class="post-content mx-auto">
            <!-- SEO header -->
            <h1 style="display: none">Vue基础</h1>
            
            <div class="markdown-body">
              <h2 id="1-Vue基础"><a href="#1-Vue基础" class="headerlink" title="1.Vue基础"></a>1.Vue基础</h2><h3 id="一、vue概念"><a href="#一、vue概念" class="headerlink" title="一、vue概念"></a>一、vue概念</h3><p>Vue.js是一套构建用户界面的<strong>渐进式框架</strong>。与其他重量级框架不同的是，Vue采用自底向上增量开发的设计。Vue 的核心库只关注<strong>视图层</strong>，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用（单页面开发SPA）。</p>
<blockquote>
<p>渐进式框架：可以理解为上手简单，入门简单，但是可以渐近提高框架等级</p>
<p>视图层：之前我们的express它是一个MVC的框架</p>
<p>SPA：称之为单页面开发，是目前开发的主流，当前阶段能够很好的实现SPA开发的框架主要有三个，分别是<code>vue/react/angular</code></p>
</blockquote>
<p>还有一个涉及到的新概念叫<code>MVVM</code>，它是相对于<code>MVC</code>来进行的</p>
<p><strong>MVC的模型</strong></p>
<p><img src="https://gitee.com/lovesnsfi_admin/images4mk/raw/master/imgs/1200px-ModelViewControllerDiagram2.svg_.png" srcset="/blog/img/loading.gif" lazyload alt="img"></p>
<p>M：Module数据模型，可以理解为从数据库查出来的数据</p>
<p>V：View视图，可以理解为页面</p>
<p>C：Controller控制器,一般可以理解为路由</p>
<p>在nodejs里面典型的MVC框架就是express,koa,egg等，但是我们在学习的时候只是使用了<code>express</code>里面的M和C</p>
<hr>
<p>MVVM：Model View and ViewModel，直接将数据与视图结合，去掉中间的整合过程，这样更快速，更高效，最典型的应用点就是数据驱动页面</p>
<h3 id="二、vue安装与使用及版本介绍"><a href="#二、vue安装与使用及版本介绍" class="headerlink" title="二、vue安装与使用及版本介绍"></a>二、vue安装与使用及版本介绍</h3><p>目前最新版本是<code>3.2.0-beta.8</code>，但是稳定版仍然持续在<code>2.6.14</code>，授课仍然以2为主，后面带入到3</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs bash">$ yarn add vue<br></code></pre></td></tr></table></figure>

<p>下载包以后，直接找到<code>vue.js</code>或<code>vue.min.js</code>即可</p>
<h3 id="三、vue接管页面数据"><a href="#三、vue接管页面数据" class="headerlink" title="三、vue接管页面数据"></a>三、vue接管页面数据</h3><p>vue的核心</p>
<ol>
<li>数据驱动页面【抛弃DOM操作】</li>
<li>虚拟DOM操作(virtual-dom)</li>
</ol>
<p>现在在基础阶段我们只关注第一个点<strong>数据驱动页面</strong>，在开发过程当中<code>vue</code>会接管整个页面的数据以及事件等</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;app&quot;</span>&gt;</span><br><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./js/vue.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    <span class="hljs-keyword">new</span> Vue(&#123;</span><br><span class="javascript">        <span class="hljs-attr">el</span>: <span class="hljs-string">&quot;#app&quot;</span></span><br><span class="javascript">    &#125;);</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<blockquote>
<p>vue在接管页面的时候，它不能接管body更不能接管html</p>
</blockquote>
<p>当vue一旦接管某一个区域以后，这个区域里面所有的东西都可以通过<code>vue</code>来操作，如数据，事件，样式等</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;app&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text&quot;</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">&quot;userName&quot;</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;width: 500px;height: 40px;&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>&#123;&#123;userName&#125;&#125;<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">v-show</span>=<span class="hljs-string">&quot;userName.length&lt;=0&quot;</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;color: red;font-weight: bold;&quot;</span>&gt;</span>当前姓名不能为空<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./js/vue.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    <span class="hljs-keyword">new</span> Vue(&#123;</span><br><span class="javascript">        <span class="hljs-attr">el</span>: <span class="hljs-string">&quot;#app&quot;</span>,</span><br><span class="javascript">        <span class="hljs-attr">data</span>: &#123;</span><br><span class="javascript">            <span class="hljs-attr">userName</span>: <span class="hljs-string">&quot;标哥哥&quot;</span></span><br><span class="javascript">        &#125;</span><br><span class="javascript">    &#125;)</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<blockquote>
<p>在上面的代码里面，我们可以看到，页面上面有一个变量<code>userName</code>，它使用的就是我们<code>data</code>里面定义的属性，vue接管页面以后，页面所有的数据都可以在<code>data</code>或后期学习的计算属性里面找到</p>
</blockquote>
<h3 id="四、vue数据绑定及渲染"><a href="#四、vue数据绑定及渲染" class="headerlink" title="四、vue数据绑定及渲染"></a>四、vue数据绑定及渲染</h3><h4 id="1-基本数据绑定渲染"><a href="#1-基本数据绑定渲染" class="headerlink" title="1. 基本数据绑定渲染"></a>1. 基本数据绑定渲染</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;app&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>&#123;&#123;1+1&#125;&#125;<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">hr</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>&#123;&#123;age+2&#125;&#125;<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">hr</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>&#123;&#123;age&gt;=18?&quot;成年&quot;:&quot;未成年&quot;&#125;&#125;<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">hr</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>当前时间：&#123;&#123;new Date().toLocaleString()&#125;&#125;<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">hr</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>&#123;&#123;new Array(10).fill(&quot;杨&quot;).join(&quot;-&quot;)&#125;&#125;<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">hr</span>&gt;</span><br>        <span class="hljs-comment">&lt;!-- 下面的写法是错的 --&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;&#123;&#123;u1&#125;&#125;&quot;</span>&gt;</span>标哥的网页<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./js/vue.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    <span class="hljs-keyword">new</span> Vue(&#123;</span><br><span class="javascript">        <span class="hljs-attr">el</span>: <span class="hljs-string">&quot;#app&quot;</span>,</span><br><span class="javascript">        <span class="hljs-attr">data</span>: &#123;</span><br><span class="javascript">            <span class="hljs-attr">age</span>: <span class="hljs-number">18</span>,</span><br><span class="javascript">            <span class="hljs-attr">u1</span>: <span class="hljs-string">&quot;http://www.softeem.xin:8090&quot;</span></span><br><span class="javascript">        &#125;</span><br><span class="javascript">    &#125;);</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>

<ol>
<li><code>v-text</code>数据绑定</li>
<li><code>v-html</code>数据绑定</li>
<li><code>&#123;&#123;&#125;&#125;`数据绑定，这一种相当于`innerText`的数据绑定
4. `v-model`表单元素的绑定，执行双向数据绑定
5. `v-once`单次绑定，只会在第一次的时候绑定这个值 ，这个值如果后期改变了，我也不改变

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;app&quot;</span>&gt;</span><br>        姓名：<span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text&quot;</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">&quot;userName&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">hr</span>&gt;</span><br>        年龄：<span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text&quot;</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">&quot;age&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">hr</span>&gt;</span><br>        性别：<span class="hljs-tag">&lt;<span class="hljs-name">select</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">&quot;sex&quot;</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;男&quot;</span>&gt;</span>这是儿子伢<span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;女&quot;</span>&gt;</span>这是姑娘伢<span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">select</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">hr</span>&gt;</span><br>        角色：<span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;radio&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;aaa&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;学生&quot;</span></span><br><span class="hljs-tag">            <span class="hljs-attr">v-model</span>=<span class="hljs-string">&quot;role&quot;</span>&gt;</span>我是学生<br>        <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;radio&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;aaa&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;老师&quot;</span></span><br><span class="hljs-tag">            <span class="hljs-attr">v-model</span>=<span class="hljs-string">&quot;role&quot;</span>&gt;</span>我是老师<br>        <span class="hljs-tag">&lt;<span class="hljs-name">hr</span>&gt;</span><br>        爱好：<span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;checkbox&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;bbb&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;看书&quot;</span></span><br><span class="hljs-tag">            <span class="hljs-attr">v-model</span>=<span class="hljs-string">&quot;hobby&quot;</span>&gt;</span>看书<br>        <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;checkbox&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;bbb&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;睡觉&quot;</span></span><br><span class="hljs-tag">            <span class="hljs-attr">v-model</span>=<span class="hljs-string">&quot;hobby&quot;</span>&gt;</span>睡觉<br>        <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;checkbox&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;bbb&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;玩游戏&quot;</span></span><br><span class="hljs-tag">            <span class="hljs-attr">v-model</span>=<span class="hljs-string">&quot;hobby&quot;</span>&gt;</span>玩游戏<br>        <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;checkbox&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;bbb&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;打牌&quot;</span></span><br><span class="hljs-tag">            <span class="hljs-attr">v-model</span>=<span class="hljs-string">&quot;hobby&quot;</span>&gt;</span>打牌<br><br>        <span class="hljs-tag">&lt;<span class="hljs-name">hr</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>&#123;&#123;sex&#125;&#125;<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>&#123;&#123;role&#125;&#125;<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>&#123;&#123;hobby&#125;&#125;<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./js/vue.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    <span class="hljs-keyword">new</span> Vue(&#123;</span><br><span class="javascript">        <span class="hljs-attr">el</span>: <span class="hljs-string">&quot;#app&quot;</span>,</span><br><span class="javascript">        <span class="hljs-attr">data</span>: &#123;</span><br><span class="javascript">            <span class="hljs-attr">userName</span>: <span class="hljs-string">&quot;小珊子&quot;</span>,</span><br><span class="javascript">            <span class="hljs-attr">age</span>: <span class="hljs-number">18</span>,</span><br><span class="javascript">            <span class="hljs-attr">sex</span>: <span class="hljs-string">&quot;女&quot;</span>,</span><br><span class="javascript">            <span class="hljs-attr">role</span>: <span class="hljs-string">&quot;学生&quot;</span>,</span><br><span class="javascript">            <span class="hljs-attr">hobby</span>: [<span class="hljs-string">&quot;玩游戏&quot;</span>]</span><br><span class="javascript">        &#125;</span><br><span class="javascript">    &#125;);</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

#### 2. 列表渲染

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;app&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">v-for</span>=<span class="hljs-string">&quot;(item,index) in stuList&quot;</span> <span class="hljs-attr">:key</span>=<span class="hljs-string">&quot;index&quot;</span>&gt;</span><br>            &#123;&#123;index&#125;&#125;----&#123;&#123;item&#125;&#125;<br>        <span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./js/vue.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    <span class="hljs-keyword">new</span> Vue(&#123;</span><br><span class="javascript">        <span class="hljs-attr">el</span>: <span class="hljs-string">&quot;#app&quot;</span>,</span><br><span class="javascript">        <span class="hljs-attr">data</span>: &#123;</span><br><span class="javascript">            <span class="hljs-attr">stuList</span>: [<span class="hljs-string">&quot;季强&quot;</span>, <span class="hljs-string">&quot;欢欢&quot;</span>, <span class="hljs-string">&quot;松明大哥&quot;</span>, <span class="hljs-string">&quot;喻金大哥&quot;</span>]</span><br><span class="javascript">        &#125;</span><br><span class="javascript">    &#125;);</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>

> 1. 在使用v-for的时候最好是在每一个生成项上面添加一个:key，相当于数据库的主键，不重复，不可或缺
> 2. 后期SPA脚手架里面，严禁使用index做key，如果非要使用index做key,一定要注意后果

#### 3. 条件渲染

这个就是根据某一个条件才去执行渲染，条件成立就渲染出来 ，条件不成立就不渲染出来

* `v-if`
* `v-else`
* `v-else-if`

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;app&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">h2</span> <span class="hljs-attr">v-if</span>=<span class="hljs-string">&quot;flag&quot;</span>&gt;</span>标哥哥真帅<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">hr</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;range&quot;</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">&quot;age&quot;</span>&gt;</span>&#123;&#123;age&#125;&#125;<br>        <span class="hljs-comment">&lt;!-- 如果年龄大于等于18就渲染第一个成年，否则就渲染第二个 未成年 --&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">h2</span> <span class="hljs-attr">v-if</span>=<span class="hljs-string">&quot;age&gt;=18&quot;</span>&gt;</span>你是成年人了<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">h2</span> <span class="hljs-attr">v-else</span>&gt;</span>我勒个去，你还是个小孩子<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./js/vue.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    <span class="hljs-keyword">new</span> Vue(&#123;</span><br><span class="javascript">        <span class="hljs-attr">el</span>: <span class="hljs-string">&quot;#app&quot;</span>,</span><br><span class="javascript">        <span class="hljs-attr">data</span>: &#123;</span><br><span class="javascript">            <span class="hljs-attr">flag</span>: <span class="hljs-literal">true</span>,</span><br><span class="javascript">            <span class="hljs-attr">age</span>:<span class="hljs-number">19</span></span><br><span class="javascript">        &#125;</span><br><span class="javascript">    &#125;);</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;app&quot;</span>&gt;</span><br>        <span class="hljs-comment">&lt;!-- </span><br><span class="hljs-comment">            100~90优秀</span><br><span class="hljs-comment">            89~89良好</span><br><span class="hljs-comment">            79~70中等</span><br><span class="hljs-comment">            69~60及格</span><br><span class="hljs-comment">            60以及不及格</span><br><span class="hljs-comment">         --&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">h2</span> <span class="hljs-attr">v-if</span>=<span class="hljs-string">&quot;score&gt;=90&quot;</span>&gt;</span>优秀<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">h2</span> <span class="hljs-attr">v-else-if</span>=<span class="hljs-string">&quot;score&gt;=80&quot;</span>&gt;</span>良好<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">h2</span> <span class="hljs-attr">v-else-if</span>=<span class="hljs-string">&quot;score&gt;=70&quot;</span>&gt;</span>中等<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">h2</span> <span class="hljs-attr">v-else-if</span>=<span class="hljs-string">&quot;score&gt;=60&quot;</span>&gt;</span>及格<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">h2</span> <span class="hljs-attr">v-else</span>&gt;</span>小坏蛋，竟然不及格<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./js/vue.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    <span class="hljs-keyword">new</span> Vue(&#123;</span><br><span class="javascript">        <span class="hljs-attr">el</span>: <span class="hljs-string">&quot;#app&quot;</span>,</span><br><span class="javascript">        <span class="hljs-attr">data</span>: &#123;</span><br><span class="javascript">            <span class="hljs-attr">score</span>: <span class="hljs-number">90</span></span><br><span class="javascript">        &#125;</span><br><span class="javascript">    &#125;);</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

条件渲染与列表渲染还可以结合起为一起使用

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;app&quot;</span>&gt;</span><br>        <span class="hljs-comment">&lt;!-- 只渲染stuList里面性别为男的数据 --&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">ul</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">v-for</span>=<span class="hljs-string">&quot;(item,index) in stuList&quot;</span></span><br><span class="hljs-tag">                <span class="hljs-attr">:key</span>=<span class="hljs-string">&quot;index&quot;</span></span><br><span class="hljs-tag">                <span class="hljs-attr">v-if</span>=<span class="hljs-string">&quot;item.sex==&#x27;男&#x27;&quot;</span>&gt;</span><br>                &#123;&#123;item.stuName&#125;&#125;-----&#123;&#123;item.sex&#125;&#125;<br>            <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./js/vue.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    <span class="hljs-keyword">new</span> Vue(&#123;</span><br><span class="javascript">        <span class="hljs-attr">el</span>: <span class="hljs-string">&quot;#app&quot;</span>,</span><br><span class="javascript">        <span class="hljs-attr">data</span>: &#123;</span><br><span class="javascript">            <span class="hljs-attr">stuList</span>: [&#123;</span><br><span class="javascript">                <span class="hljs-attr">stuName</span>: <span class="hljs-string">&quot;季强&quot;</span>,</span><br><span class="javascript">                <span class="hljs-attr">sex</span>: <span class="hljs-string">&quot;男&quot;</span></span><br><span class="javascript">            &#125;, &#123;</span><br><span class="javascript">                <span class="hljs-attr">stuName</span>: <span class="hljs-string">&quot;陈欢欢&quot;</span>,</span><br><span class="javascript">                <span class="hljs-attr">sex</span>: <span class="hljs-string">&quot;女&quot;</span></span><br><span class="javascript">            &#125;, &#123;</span><br><span class="javascript">                <span class="hljs-attr">stuName</span>: <span class="hljs-string">&quot;松明大哥&quot;</span>,</span><br><span class="javascript">                <span class="hljs-attr">sex</span>: <span class="hljs-string">&quot;男&quot;</span></span><br><span class="javascript">            &#125;, &#123;</span><br><span class="javascript">                <span class="hljs-attr">stuName</span>: <span class="hljs-string">&quot;喻金大哥&quot;</span>,</span><br><span class="javascript">                <span class="hljs-attr">sex</span>: <span class="hljs-string">&quot;男&quot;</span></span><br><span class="javascript">            &#125;]</span><br><span class="javascript">        &#125;</span><br><span class="javascript">    &#125;);</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

> **本质**：v-if渲染与不渲染本质就是在页面里面把你注释掉了，条件成立就不注释，条件不成立就把这个元素注释掉

#### 4. v-show条件显示

这个东西与上面的东西`v-if`非常像，但是本质是不一样的

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">h2</span> <span class="hljs-attr">v-show</span>=<span class="hljs-string">&quot;flag2&quot;</span>&gt;</span>这还是标哥哥<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span><br></code></pre></td></tr></table></figure>

> **本质**：`v-show`如果条件成立就正常显示 ，如果条件不成立，则会通过`display:none`来进行隐藏

#### 5. 属性绑定

回顾上面的数据绑定，我们发现无论是通过`&#123;&#123;&#125;&#125;</code>还是<code>v-text</code>及<code>v-html</code>和<code>v-model</code>它们都只是对<code>innerText/innerHTML/value</code>属性进行绑定。如果我们要绑定其它属性呢，这个时候我们要使用vue专门的指令叫<code>v-bind:属性名</code>来进行</li>
</ol>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;app&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">v-bind:href</span>=<span class="hljs-string">&quot;u1&quot;</span>&gt;</span>百度一下<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">hr</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">:href</span>=<span class="hljs-string">&quot;u2&quot;</span>&gt;</span>标哥哥的博客<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./js/vue.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    <span class="hljs-keyword">new</span> Vue(&#123;</span><br><span class="javascript">        <span class="hljs-attr">el</span>: <span class="hljs-string">&quot;#app&quot;</span>,</span><br><span class="javascript">        <span class="hljs-attr">data</span>: &#123;</span><br><span class="javascript">            <span class="hljs-attr">u1</span>: <span class="hljs-string">&quot;https://www.baidu.com&quot;</span>,</span><br><span class="javascript">            <span class="hljs-attr">u2</span>: <span class="hljs-string">&quot;http://www.softeem.xin:8090&quot;</span></span><br><span class="javascript">        &#125;</span><br><span class="javascript">    &#125;);</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<blockquote>
<p><strong>重点注意</strong>：属性绑定本应该使用<code>v-bind:属性名</code>来完成，但是vue考虑到这个操作在后期的开发当中经常使用，所以直接简写成<code>:属性名</code>就可以了</p>
<p>所以后期如果看到一个属性的前面有<code>:</code>则代表动态属性绑定</p>
</blockquote>
<p>在属性绑定里面有两个属性比较特殊，我们要到后面讲，这两个属性是<code>style</code>和<code>class</code></p>
<h3 id="五、vue-指令及自定义指令"><a href="#五、vue-指令及自定义指令" class="headerlink" title="五、vue 指令及自定义指令"></a>五、vue 指令及自定义指令</h3><p>在上面的执行数据渲染和绑定的过程当中，我们看到了很多以<code>v-xxx</code>的东西，这些东西在<code>vue</code>里面叫指令</p>
<ol>
<li><code>v-text</code></li>
<li><code>v-html</code></li>
<li><code>v-model</code></li>
<li><code>v-if</code></li>
<li><code>v-else</code></li>
<li><code>v-else-if</code></li>
<li><code>v-for</code></li>
<li><code>v-show</code></li>
<li><code>v-bind</code></li>
</ol>
<p>上面都是<code>vue</code>自带的指令，我们还可以根据自己的需求来写一些自己的指定，它通过<code>Vue.directive</code>来定义，这里先不做讲解，在项目式授课里面具体讲解</p>
<p>vue是通过一系列的指令来完成页面的操作的，指令应该算是一个重要的环节</p>
<h3 id="六、vue事件与事件对象，参数"><a href="#六、vue事件与事件对象，参数" class="headerlink" title="六、vue事件与事件对象，参数"></a>六、vue事件与事件对象，参数</h3><p>vue在接管页面的时候，上面的过程是接管数据的过程，它还可以接管事件及方法，它的事件绑定通过<code>v-on:事件名</code>来进行</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;app&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span></span><br><span class="hljs-tag">            <span class="hljs-attr">v-on:click</span>=<span class="hljs-string">&quot;sayHello&quot;</span>&gt;</span><br>            按钮1<br>        <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">h2</span> <span class="hljs-attr">v-on:click</span>=<span class="hljs-string">&quot;aaa(1231123)&quot;</span>&gt;</span>你好<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./js/vue.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    <span class="hljs-keyword">new</span> Vue(&#123;</span><br><span class="javascript">        <span class="hljs-attr">el</span>: <span class="hljs-string">&quot;#app&quot;</span>,</span><br><span class="javascript">        <span class="hljs-comment">// 负责接管页面的数据</span></span><br><span class="javascript">        <span class="hljs-attr">data</span>: &#123;</span><br><span class="javascript"></span><br><span class="javascript">        &#125;,</span><br><span class="javascript">        <span class="hljs-comment">//负责接管页面的方法</span></span><br><span class="javascript">        <span class="hljs-attr">methods</span>: &#123;</span><br><span class="javascript">            <span class="hljs-function"><span class="hljs-title">sayHello</span>(<span class="hljs-params"></span>)</span> &#123;</span><br><span class="javascript">                alert(<span class="hljs-string">&quot;大家好，我是vue的第一个方法&quot;</span>)</span><br><span class="javascript">            &#125;,</span><br><span class="javascript">            <span class="hljs-function"><span class="hljs-title">aaa</span>(<span class="hljs-params">number</span>)</span>&#123;</span><br><span class="javascript">                alert(number);</span><br><span class="javascript">            &#125;</span><br><span class="javascript">        &#125;</span><br><span class="javascript">    &#125;);</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<blockquote>
<p>在上面的事件方法里面，我们可以看到<code>methods</code>负责接管整个页面的事件方法，同时在事件调用方法的时候，如果这个方法不需要传递参数，则方法后面的小括号可以省略</p>
</blockquote>
<p>同时<code>vue</code>也考虑到事件绑定会经常操作，它也有一种简写方法<code>@事件名</code>来进行</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">&quot;sayHello&quot;</span>&gt;</span>简写<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p>如果需要得到事件对象，则需要在调用事件方法的时候传递<code>$event</code>来进行</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">&quot;sayHello($event)&quot;</span>&gt;</span>简写<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p>在vue的事件内部，如果想拿到<code>data</code>里面的数据，应该使用<code>this.$data</code>，但是可以简写，去掉<code>$data</code>也可以，如下</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;app&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text&quot;</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">&quot;userName&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>&#123;&#123;userName&#125;&#125;<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">&quot;aaa&quot;</span>&gt;</span>按钮1<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./js/vue.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    <span class="hljs-keyword">new</span> Vue(&#123;</span><br><span class="javascript">        <span class="hljs-attr">el</span>: <span class="hljs-string">&quot;#app&quot;</span>,</span><br><span class="javascript">        <span class="hljs-comment">// 负责接管页面的数据</span></span><br><span class="javascript">        <span class="hljs-attr">data</span>: &#123;</span><br><span class="javascript">            <span class="hljs-attr">userName</span>: <span class="hljs-string">&quot;张三&quot;</span></span><br><span class="javascript">        &#125;,</span><br><span class="javascript">        <span class="hljs-comment">//负责接管页面的方法</span></span><br><span class="javascript">        <span class="hljs-attr">methods</span>: &#123;</span><br><span class="javascript">            <span class="hljs-function"><span class="hljs-title">aaa</span>(<span class="hljs-params"></span>)</span> &#123;</span><br><span class="javascript">                <span class="hljs-comment">//正常情况下，确实应该使用this.$data去找data</span></span><br><span class="javascript">                <span class="hljs-comment">// console.log(this.$data.userName);</span></span><br><span class="javascript">                <span class="hljs-built_in">console</span>.log(<span class="hljs-built_in">this</span>.userName);</span><br><span class="javascript">                <span class="hljs-built_in">this</span>.bbb();</span><br><span class="javascript">            &#125;,</span><br><span class="javascript">            <span class="hljs-function"><span class="hljs-title">bbb</span>(<span class="hljs-params"></span>)</span> &#123;</span><br><span class="javascript">                alert(<span class="hljs-string">&quot;hello world&quot;</span>);</span><br><span class="javascript">            &#125;</span><br><span class="javascript">        &#125;</span><br><span class="javascript">    &#125;);</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<blockquote>
<p>同时如果要在方法的内部调用其它方法，也是直接通过<code>this</code>来调用</p>
</blockquote>
<h3 id="七、vue计算属性"><a href="#七、vue计算属性" class="headerlink" title="七、vue计算属性"></a>七、vue计算属性</h3><p>之前给同学们提到过，如果托管区域要使用数据 必须 从<code>data</code>里面得到，其实从<code>computed</code>计算属性里面也可以得到</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;app&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>&#123;&#123;aaa&#125;&#125;<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">hr</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>&#123;&#123;bbb&#125;&#125;<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./js/vue.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    <span class="hljs-keyword">new</span> Vue(&#123;</span><br><span class="javascript">        <span class="hljs-attr">el</span>: <span class="hljs-string">&quot;#app&quot;</span>,</span><br><span class="javascript">        <span class="hljs-attr">data</span>: &#123;</span><br><span class="javascript">          </span><br><span class="javascript">        &#125;,</span><br><span class="javascript">        <span class="hljs-comment">//计算属性，计算属性是一个方法，空上方法的返回值会当成渲染的值</span></span><br><span class="javascript">        <span class="hljs-attr">computed</span>:&#123;</span><br><span class="javascript">            <span class="hljs-function"><span class="hljs-title">aaa</span>(<span class="hljs-params"></span>)</span>&#123;</span><br><span class="javascript">                <span class="hljs-keyword">return</span> <span class="hljs-string">&quot;标哥&quot;</span></span><br><span class="javascript">            &#125;,</span><br><span class="javascript">            <span class="hljs-function"><span class="hljs-title">bbb</span>(<span class="hljs-params"></span>)</span>&#123;</span><br><span class="javascript">                <span class="hljs-keyword">return</span> <span class="hljs-built_in">parseInt</span>(<span class="hljs-built_in">Math</span>.random()*<span class="hljs-number">100</span>)</span><br><span class="javascript">            &#125;</span><br><span class="javascript">        &#125;</span><br><span class="javascript">    &#125;);</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<blockquote>
<p>计算属性本质上面是一个方法，它可以通过我们的<code>computed</code>里面定义方法，然后在方法里面返回值去实现功能</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;app&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>男生：&#123;&#123;boyCount&#125;&#125;<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>女生：&#123;&#123;girlCount&#125;&#125;<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./js/vue.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    <span class="hljs-keyword">new</span> Vue(&#123;</span><br><span class="javascript">        <span class="hljs-attr">el</span>: <span class="hljs-string">&quot;#app&quot;</span>,</span><br><span class="javascript">        <span class="hljs-comment">// 负责接管页面的数据</span></span><br><span class="javascript">        <span class="hljs-attr">data</span>: &#123;</span><br><span class="javascript">            <span class="hljs-attr">stuList</span>: [&#123;</span><br><span class="javascript">                <span class="hljs-attr">stuName</span>: <span class="hljs-string">&quot;季强&quot;</span>,</span><br><span class="javascript">                <span class="hljs-attr">sex</span>: <span class="hljs-string">&quot;男&quot;</span></span><br><span class="javascript">            &#125;, &#123;</span><br><span class="javascript">                <span class="hljs-attr">stuName</span>: <span class="hljs-string">&quot;陈欢欢&quot;</span>,</span><br><span class="javascript">                <span class="hljs-attr">sex</span>: <span class="hljs-string">&quot;女&quot;</span></span><br><span class="javascript">            &#125;, &#123;</span><br><span class="javascript">                <span class="hljs-attr">stuName</span>: <span class="hljs-string">&quot;松明大哥&quot;</span>,</span><br><span class="javascript">                <span class="hljs-attr">sex</span>: <span class="hljs-string">&quot;男&quot;</span></span><br><span class="javascript">            &#125;, &#123;</span><br><span class="javascript">                <span class="hljs-attr">stuName</span>: <span class="hljs-string">&quot;喻金大哥&quot;</span>,</span><br><span class="javascript">                <span class="hljs-attr">sex</span>: <span class="hljs-string">&quot;男&quot;</span></span><br><span class="javascript">            &#125;]</span><br><span class="javascript">        &#125;,</span><br><span class="javascript">        <span class="hljs-attr">computed</span>: &#123;</span><br><span class="javascript">            <span class="hljs-function"><span class="hljs-title">boyCount</span>(<span class="hljs-params"></span>)</span> &#123;</span><br><span class="javascript">                <span class="hljs-keyword">return</span> <span class="hljs-built_in">this</span>.stuList.filter(<span class="hljs-function"><span class="hljs-params">item</span> =&gt;</span> item.sex == <span class="hljs-string">&quot;男&quot;</span>).length;</span><br><span class="javascript">            &#125;,</span><br><span class="javascript">            <span class="hljs-function"><span class="hljs-title">girlCount</span>(<span class="hljs-params"></span>)</span> &#123;</span><br><span class="javascript">                <span class="hljs-keyword">return</span> <span class="hljs-built_in">this</span>.stuList.filter(<span class="hljs-function"><span class="hljs-params">item</span>=&gt;</span>item.sex==<span class="hljs-string">&quot;女&quot;</span>).length;</span><br><span class="javascript">            &#125;</span><br><span class="javascript">        &#125;</span><br><span class="javascript"></span><br><span class="javascript">    &#125;);</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p>下面是一个经典的案例</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;app&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">table</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;table-box&quot;</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">tr</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">th</span>&gt;</span>编号<span class="hljs-tag">&lt;/<span class="hljs-name">th</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">th</span>&gt;</span>名称<span class="hljs-tag">&lt;/<span class="hljs-name">th</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">th</span>&gt;</span>单价<span class="hljs-tag">&lt;/<span class="hljs-name">th</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">th</span>&gt;</span>数量<span class="hljs-tag">&lt;/<span class="hljs-name">th</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">th</span>&gt;</span>总价<span class="hljs-tag">&lt;/<span class="hljs-name">th</span>&gt;</span><br>            <span class="hljs-tag">&lt;/<span class="hljs-name">tr</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">tr</span> <span class="hljs-attr">v-for</span>=<span class="hljs-string">&quot;(item,index) in shopCartList&quot;</span> <span class="hljs-attr">:key</span>=<span class="hljs-string">&quot;index&quot;</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>&#123;&#123;item.gid&#125;&#125;<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>&#123;&#123;item.gname&#125;&#125;<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>&#123;&#123;item.price&#125;&#125;<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;text-align: center;&quot;</span>&gt;</span><br>                    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">&quot;item.count--&quot;</span> <span class="hljs-attr">v-show</span>=<span class="hljs-string">&quot;item.count&gt;0&quot;</span>&gt;</span>-<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>                    &#123;&#123;item.count&#125;&#125;<br>                    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">&quot;item.count++&quot;</span>&gt;</span>+<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>                <span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>&#123;&#123;item.price * item.count&#125;&#125;<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span><br>            <span class="hljs-tag">&lt;/<span class="hljs-name">tr</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">tr</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>合计：<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">colspan</span>=<span class="hljs-string">&quot;4&quot;</span>&gt;</span>&#123;&#123;totalMoney&#125;&#125;元<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span><br>            <span class="hljs-tag">&lt;/<span class="hljs-name">tr</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">table</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./js/vue.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    <span class="hljs-keyword">new</span> Vue(&#123;</span><br><span class="javascript">        <span class="hljs-attr">el</span>:<span class="hljs-string">&quot;#app&quot;</span>,</span><br><span class="javascript">        <span class="hljs-attr">data</span>:&#123;</span><br><span class="javascript">            <span class="hljs-attr">shopCartList</span>:[</span><br><span class="javascript">                &#123;<span class="hljs-attr">gid</span>:<span class="hljs-string">&quot;g01&quot;</span>,<span class="hljs-attr">gname</span>:<span class="hljs-string">&quot;华为mate 50手机&quot;</span>,<span class="hljs-attr">price</span>:<span class="hljs-number">1999</span>,<span class="hljs-attr">count</span>:<span class="hljs-number">1</span>&#125;,</span><br><span class="javascript">                &#123;<span class="hljs-attr">gid</span>:<span class="hljs-string">&quot;g02&quot;</span>,<span class="hljs-attr">gname</span>:<span class="hljs-string">&quot;充电宝&quot;</span>,<span class="hljs-attr">price</span>:<span class="hljs-number">200</span>,<span class="hljs-attr">count</span>:<span class="hljs-number">2</span>&#125;,</span><br><span class="javascript">                &#123;<span class="hljs-attr">gid</span>:<span class="hljs-string">&quot;g03&quot;</span>,<span class="hljs-attr">gname</span>:<span class="hljs-string">&quot;耳机&quot;</span>,<span class="hljs-attr">price</span>:<span class="hljs-number">35</span>,<span class="hljs-attr">count</span>:<span class="hljs-number">3</span>&#125;,</span><br><span class="javascript">                &#123;<span class="hljs-attr">gid</span>:<span class="hljs-string">&quot;g04&quot;</span>,<span class="hljs-attr">gname</span>:<span class="hljs-string">&quot;数据线&quot;</span>,<span class="hljs-attr">price</span>:<span class="hljs-number">18</span>,<span class="hljs-attr">count</span>:<span class="hljs-number">5</span>&#125;,</span><br><span class="javascript">                &#123;<span class="hljs-attr">gid</span>:<span class="hljs-string">&quot;g05&quot;</span>,<span class="hljs-attr">gname</span>:<span class="hljs-string">&quot;电脑&quot;</span>,<span class="hljs-attr">price</span>:<span class="hljs-number">6189</span>,<span class="hljs-attr">count</span>:<span class="hljs-number">1</span>&#125;,</span><br><span class="javascript">            ]</span><br><span class="javascript">        &#125;,</span><br><span class="javascript">        <span class="hljs-attr">computed</span>:&#123;</span><br><span class="javascript">            <span class="hljs-function"><span class="hljs-title">totalMoney</span>(<span class="hljs-params"></span>)</span>&#123;</span><br><span class="javascript">                <span class="hljs-keyword">return</span> <span class="hljs-built_in">this</span>.shopCartList.reduce(<span class="hljs-function">(<span class="hljs-params">prev,current,index,_arr</span>)=&gt;</span>&#123;</span><br><span class="javascript">                    <span class="hljs-keyword">return</span> prev + current.price * current.count;</span><br><span class="javascript">                &#125;,<span class="hljs-number">0</span>);</span><br><span class="javascript">            &#125;</span><br><span class="javascript">        &#125;</span><br><span class="javascript">    &#125;)</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p><img src="https://pic.imgdb.cn/item/618e174f2ab3f51d91d8c5d8.png" srcset="/blog/img/loading.gif" lazyload alt="image-20211110143743590"></p>
<h3 id="八、vue侦听器"><a href="#八、vue侦听器" class="headerlink" title="八、vue侦听器"></a>八、vue侦听器</h3><p>vue里面的侦听器也叫属性监听，它可以监控某一个属性值的变化，然后根据这个变化做出后续的处理</p>
<p>这个东西与我们之前所学过的<code>Object.defineProperty</code>当中的<code>get/set</code>很像</p>
<h4 id="1-普通侦听"><a href="#1-普通侦听" class="headerlink" title="1. 普通侦听"></a>1. 普通侦听</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;app&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text&quot;</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">&quot;age&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./js/vue.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    <span class="hljs-keyword">new</span> Vue(&#123;</span><br><span class="javascript">        <span class="hljs-attr">el</span>: <span class="hljs-string">&quot;#app&quot;</span>,</span><br><span class="javascript">        <span class="hljs-attr">data</span>: &#123;</span><br><span class="javascript">            <span class="hljs-attr">age</span>: <span class="hljs-number">18</span>,</span><br><span class="javascript">        &#125;,</span><br><span class="javascript">        <span class="hljs-attr">watch</span>: &#123;</span><br><span class="javascript">            <span class="hljs-comment">//我在监控age这个属性，当这个属性值发生变化以后，触发这个方法</span></span><br><span class="javascript">            <span class="hljs-function"><span class="hljs-title">age</span>(<span class="hljs-params">newValue, oldValue</span>)</span> &#123;</span><br><span class="javascript">                <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;新的值为&quot;</span> + newValue);</span><br><span class="javascript">                <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;旧的值为&quot;</span> + oldValue);</span><br><span class="javascript">            &#125;</span><br><span class="javascript">        &#125;</span><br><span class="javascript"></span><br><span class="javascript">    &#125;)</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<blockquote>
<p>上面的代码就是一个最简单的监听属性（侦听器），它监听了<code>age</code>的变化</p>
<p>在侦听器方法里面可以接收两个参数，第一个参数是新的值，第二个参数是原来的值</p>
<p>普通侦听器只是侦听到了栈里面的变化</p>
</blockquote>
<p>上面的这种侦听器只是一种普通的侦听，它只能够进行基本数据类型的侦听，如果是对象则侦听不到。原因是因为普通侦听器只监控栈，如果要监控到堆的变化则必须使用深度监听</p>
<h4 id="2-深度侦听"><a href="#2-深度侦听" class="headerlink" title="2. 深度侦听"></a>2. 深度侦听</h4><p>深度侦听器是一个对象</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;app&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text&quot;</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">&quot;userInfo.age&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./js/vue.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    <span class="hljs-keyword">new</span> Vue(&#123;</span><br><span class="javascript">        <span class="hljs-attr">el</span>: <span class="hljs-string">&quot;#app&quot;</span>,</span><br><span class="javascript">        <span class="hljs-attr">data</span>: &#123;</span><br><span class="javascript">            <span class="hljs-attr">userInfo</span>: &#123;</span><br><span class="javascript">                <span class="hljs-attr">age</span>: <span class="hljs-number">18</span></span><br><span class="javascript">            &#125;</span><br><span class="javascript">        &#125;,</span><br><span class="javascript">        <span class="hljs-attr">watch</span>: &#123;</span><br><span class="javascript">            <span class="hljs-attr">userInfo</span>: &#123;</span><br><span class="javascript">                <span class="hljs-function"><span class="hljs-title">handler</span>(<span class="hljs-params">newValue</span>)</span> &#123;</span><br><span class="javascript">                    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;新的值&quot;</span>,newValue);</span><br><span class="javascript">                &#125;,</span><br><span class="javascript">                <span class="hljs-attr">deep</span>: <span class="hljs-literal">true</span></span><br><span class="javascript">            &#125;</span><br><span class="javascript">        &#125;</span><br><span class="javascript"></span><br><span class="javascript">    &#125;)</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<blockquote>
<p>深度侦听必须是一个对象，这个对象的内部的<code>handler</code>的方法是用于处理变化以后的操作，<code>deep:true</code>代表当前执行深度侦听</p>
</blockquote>
<h3 id="九、vue修饰符"><a href="#九、vue修饰符" class="headerlink" title="九、vue修饰符"></a>九、vue修饰符</h3><p>修饰符也叫事件修饰符，我们在第5个章节讲到了vue里面的事件，但那只是基础，如果要深入的使用事件，修饰符是必不可少的</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;app&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;box&quot;</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">&quot;a&quot;</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> @<span class="hljs-attr">click.stop</span>=<span class="hljs-string">&quot;b&quot;</span>&gt;</span>按钮<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><br>        <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> @<span class="hljs-attr">mousedown.left</span>=<span class="hljs-string">&quot;a&quot;</span>&gt;</span>又一个按钮<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./js/vue.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    <span class="hljs-keyword">new</span> Vue(&#123;</span><br><span class="javascript">        <span class="hljs-attr">el</span>: <span class="hljs-string">&quot;#app&quot;</span>,</span><br><span class="javascript">        <span class="hljs-attr">data</span>: &#123;</span><br><span class="javascript">            <span class="hljs-attr">userInfo</span>: &#123;</span><br><span class="javascript">                <span class="hljs-attr">age</span>: <span class="hljs-number">18</span></span><br><span class="javascript">            &#125;</span><br><span class="javascript">        &#125;,</span><br><span class="javascript">        <span class="hljs-attr">methods</span>: &#123;</span><br><span class="javascript">            <span class="hljs-function"><span class="hljs-title">a</span>(<span class="hljs-params"></span>)</span> &#123;</span><br><span class="javascript">                <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;我是a方法&quot;</span>);</span><br><span class="javascript">            &#125;,</span><br><span class="javascript">            <span class="hljs-function"><span class="hljs-title">b</span>(<span class="hljs-params"></span>)</span> &#123;</span><br><span class="javascript">                <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;我是b方法&quot;</span>);</span><br><span class="javascript">            &#125;</span><br><span class="javascript">        &#125;</span><br><span class="javascript"></span><br><span class="javascript"></span><br><span class="javascript">    &#125;)</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p>事件修饰符可以极大的提高我们的操作</p>
<p><strong>针对于键盘的修饰符</strong></p>
<ul>
<li><code>.enter</code></li>
<li><code>.tab</code></li>
<li><code>.delete</code> (捕获“删除”和“退格”键)</li>
<li><code>.esc</code></li>
<li><code>.space</code></li>
<li><code>.up</code></li>
<li><code>.down</code></li>
<li><code>.left</code></li>
<li><code>.right</code></li>
</ul>
<p><strong>针对于系统的</strong></p>
<ul>
<li><code>.ctrl</code></li>
<li><code>.alt</code></li>
<li><code>.shift</code></li>
<li><code>.meta</code></li>
</ul>
<p><strong>针对于鼠标的</strong></p>
<ul>
<li><code>.left</code></li>
<li><code>.right</code></li>
<li><code>.middle</code></li>
</ul>
<p><strong>功能性的修饰符</strong></p>
<ul>
<li><code>.stop</code>阻止事件冒泡</li>
<li><code>.prevent</code>阻止事件的默认行为</li>
</ul>
<p>系统修饰符可以和普通修饰符联合起来使用，如<code>@click.ctrl=&quot;&quot;</code>或<code>@keydown.ctrl.enter</code></p>
<p>针对同一个事件的不同修饰符，可以绑定不同的方式</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text&quot;</span> @<span class="hljs-attr">keydown.up</span>=<span class="hljs-string">&quot;a&quot;</span> @<span class="hljs-attr">keydown.down</span>=<span class="hljs-string">&quot;b&quot;</span>&gt;</span><br></code></pre></td></tr></table></figure>

<h3 id="十、vue样式class绑定"><a href="#十、vue样式class绑定" class="headerlink" title="十、vue样式class绑定"></a>十、vue样式class绑定</h3><p>这个点应该与第七点做对比，因为class其实也是一个样式，但是<code>class</code>是一个非常特殊的属性，所以要单独的去讲解</p>
<p>vue里面的class绑定一般叫动态样式绑定，仍然执行<code>v-bind:class</code>，简写成<code>:class</code>，关键问题就在于这个属性值有两种绑定方式</p>
<h4 id="1-数组语法"><a href="#1-数组语法" class="headerlink" title="1. 数组语法"></a>1. 数组语法</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs html"> <span class="hljs-tag">&lt;<span class="hljs-name">ul</span>&gt;</span><br>     <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">v-for</span>=<span class="hljs-string">&quot;(item,index) in stuList&quot;</span> <span class="hljs-attr">:key</span>=<span class="hljs-string">&quot;index&quot;</span></span><br><span class="hljs-tag">         <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;list-item&quot;</span></span><br><span class="hljs-tag">         <span class="hljs-attr">:class</span>=<span class="hljs-string">&quot;[index==2?&#x27;active&#x27;:null]&quot;</span>&gt;</span><br>         姓名：&#123;&#123;item&#125;&#125;-----&#123;&#123;index&#125;&#125;<br>     <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span><br></code></pre></td></tr></table></figure>

<blockquote>
<p>在上面的代码里面，我们可以看到，原始的<code>class</code>可以和动态的<code>:class</code>绑定在一起</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">ul</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">v-for</span>=<span class="hljs-string">&quot;(item,index) in stuList&quot;</span> <span class="hljs-attr">:key</span>=<span class="hljs-string">&quot;index&quot;</span></span><br><span class="hljs-tag">        <span class="hljs-attr">:class</span>=<span class="hljs-string">&quot;[index==2?&#x27;active&#x27;:null,index%2==0?&#x27;list-item&#x27;:null]&quot;</span>&gt;</span><br>        姓名：&#123;&#123;item&#125;&#125;-----&#123;&#123;index&#125;&#125;<br>    <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p>下面是一个经典的vue当中的动态绑定样式的例子</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;app&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">ul</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">v-for</span>=<span class="hljs-string">&quot;(item,index) in stuList&quot;</span> <span class="hljs-attr">:key</span>=<span class="hljs-string">&quot;index&quot;</span></span><br><span class="hljs-tag">                <span class="hljs-attr">:class</span>=<span class="hljs-string">&quot;[index==selectedIndex?&#x27;active&#x27;:null]&quot;</span></span><br><span class="hljs-tag">                @<span class="hljs-attr">click</span>=<span class="hljs-string">&quot;selectedIndex=index&quot;</span>&gt;</span><br>                &#123;&#123;item&#125;&#125;<br>            <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>&#123;&#123;stuList[selectedIndex]&#125;&#125;<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./js/vue.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    <span class="hljs-keyword">new</span> Vue(&#123;</span><br><span class="javascript">        <span class="hljs-attr">el</span>: <span class="hljs-string">&quot;#app&quot;</span>,</span><br><span class="javascript">        <span class="hljs-attr">data</span>: &#123;</span><br><span class="javascript">            <span class="hljs-attr">stuList</span>: [<span class="hljs-string">&quot;杨佳琪&quot;</span>, <span class="hljs-string">&quot;陈欢欢&quot;</span>, <span class="hljs-string">&quot;刘紫微&quot;</span>, <span class="hljs-string">&quot;李光昊&quot;</span>],</span><br><span class="javascript">            <span class="hljs-attr">selectedIndex</span>:<span class="hljs-number">0</span></span><br><span class="javascript">        &#125;</span><br><span class="javascript">    &#125;)</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p><img src="https://pic.imgdb.cn/item/618e17652ab3f51d91d8ce58.png" srcset="/blog/img/loading.gif" lazyload alt="image-20211110155445125"></p>
<p>下面是一个动态样式绑定的一个案例</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-meta-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;zh&quot;</span>&gt;</span><br><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">http-equiv</span>=<span class="hljs-string">&quot;X-UA-Compatible&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;IE=edge&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;viewport&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>class样式绑定<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="css"></span><br><span class="css">        * &#123;</span><br><span class="css">            <span class="hljs-attribute">margin</span>: <span class="hljs-number">0</span>;</span><br><span class="css">            <span class="hljs-attribute">padding</span>: <span class="hljs-number">0</span>;</span><br><span class="css">            <span class="hljs-attribute">list-style-type</span>: none;</span><br><span class="css">        &#125;</span><br><span class="css"></span><br><span class="css">        <span class="hljs-selector-id">#app</span> &#123;</span><br><span class="css">            <span class="hljs-attribute">width</span>: <span class="hljs-number">100vw</span>;</span><br><span class="css">            <span class="hljs-attribute">height</span>: <span class="hljs-number">100vh</span>;</span><br><span class="css">            <span class="hljs-attribute">display</span>: flex;</span><br><span class="css">            <span class="hljs-attribute">flex-direction</span>: column;</span><br><span class="css">        &#125;</span><br><span class="css"></span><br><span class="css">        <span class="hljs-selector-class">.top-nav</span> &#123;</span><br><span class="css">            <span class="hljs-attribute">height</span>: <span class="hljs-number">45px</span>;</span><br><span class="css">            <span class="hljs-attribute">border-bottom</span>: <span class="hljs-number">1px</span> solid lightgray;</span><br><span class="css">            <span class="hljs-attribute">display</span>: flex;</span><br><span class="css">            <span class="hljs-attribute">justify-content</span>: space-evenly;</span><br><span class="css">        &#125;</span><br><span class="css"></span><br><span class="css">        <span class="hljs-selector-class">.top-nav</span>&gt;<span class="hljs-selector-tag">li</span> &#123;</span><br><span class="css">            <span class="hljs-attribute">height</span>: <span class="hljs-number">100%</span>;</span><br><span class="css">            <span class="hljs-attribute">display</span>: flex;</span><br><span class="css">            <span class="hljs-attribute">justify-content</span>: center;</span><br><span class="css">            <span class="hljs-attribute">align-items</span>: center;</span><br><span class="css">            <span class="hljs-attribute">box-sizing</span>: border-box;</span><br><span class="css">        &#125;</span><br><span class="css"></span><br><span class="css">        <span class="hljs-selector-class">.top-nav</span>&gt;<span class="hljs-selector-tag">li</span><span class="hljs-selector-class">.active</span> &#123;</span><br><span class="css">            <span class="hljs-attribute">color</span>: tomato;</span><br><span class="css">            <span class="hljs-attribute">font-weight</span>: bold;</span><br><span class="css">            <span class="hljs-attribute">border-bottom</span>: <span class="hljs-number">2px</span> solid tomato;</span><br><span class="css">        &#125;</span><br><span class="css"></span><br><span class="css">        <span class="hljs-selector-class">.content-box</span> &#123;</span><br><span class="css">            <span class="hljs-attribute">flex</span>: <span class="hljs-number">1</span>;</span><br><span class="css">            <span class="hljs-attribute">overflow</span>: auto;</span><br><span class="css">            <span class="hljs-attribute">position</span>: relative;</span><br><span class="css">        &#125;</span><br><span class="css"></span><br><span class="css">        <span class="hljs-selector-class">.tab</span> &#123;</span><br><span class="css">            <span class="hljs-attribute">position</span>: absolute;</span><br><span class="css">            <span class="hljs-attribute">width</span>: <span class="hljs-number">100%</span>;</span><br><span class="css">            <span class="hljs-attribute">height</span>: <span class="hljs-number">100%</span>;</span><br><span class="css">        &#125;</span><br><span class="css">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;app&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;top-nav&quot;</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">v-for</span>=<span class="hljs-string">&quot;(item,index) in navTypeList&quot;</span> <span class="hljs-attr">:key</span>=<span class="hljs-string">&quot;index&quot;</span></span><br><span class="hljs-tag">                <span class="hljs-attr">:class</span>=<span class="hljs-string">&quot;[index==selectedIndex?&#x27;active&#x27;:null]&quot;</span></span><br><span class="hljs-tag">                @<span class="hljs-attr">click</span>=<span class="hljs-string">&quot;selectedIndex=index&quot;</span>&gt;</span><br>                &#123;&#123;item&#125;&#125;<br>            <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;content-box&quot;</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">v-show</span>=<span class="hljs-string">&quot;selectedIndex==0&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;tab&quot;</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;background-color: bisque;&quot;</span>&gt;</span>这是关注的页面<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">v-show</span>=<span class="hljs-string">&quot;selectedIndex==1&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;tab&quot;</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;background-color: lightblue;&quot;</span>&gt;</span>这是推荐的页面<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">v-show</span>=<span class="hljs-string">&quot;selectedIndex==2&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;tab&quot;</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;background-color: pink;&quot;</span>&gt;</span>这是热榜的页面<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">v-show</span>=<span class="hljs-string">&quot;selectedIndex==3&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;tab&quot;</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;background-color: orange;&quot;</span>&gt;</span>这是武汉的页面<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">v-show</span>=<span class="hljs-string">&quot;selectedIndex==4&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;tab&quot;</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;background-color: gray;&quot;</span>&gt;</span>这是抗疫的页面<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./js/vue.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    <span class="hljs-keyword">new</span> Vue(&#123;</span><br><span class="javascript">        <span class="hljs-attr">el</span>: <span class="hljs-string">&quot;#app&quot;</span>,</span><br><span class="javascript">        <span class="hljs-attr">data</span>: &#123;</span><br><span class="javascript">            <span class="hljs-attr">navTypeList</span>: [<span class="hljs-string">&quot;关注&quot;</span>, <span class="hljs-string">&quot;推荐&quot;</span>, <span class="hljs-string">&quot;热榜&quot;</span>, <span class="hljs-string">&quot;武汉&quot;</span>, <span class="hljs-string">&quot;抗疫&quot;</span>],</span><br><span class="javascript">            <span class="hljs-attr">selectedIndex</span>: <span class="hljs-number">1</span></span><br><span class="javascript">        &#125;</span><br><span class="javascript">    &#125;)</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br><span class="hljs-comment">&lt;!-- </span><br><span class="hljs-comment">    数据驱动页面，你要改变页面，必然是改变了数据</span><br><span class="hljs-comment"> --&gt;</span><br></code></pre></td></tr></table></figure>

<img src="https://pic.imgdb.cn/item/618e179f2ab3f51d91d8e62b.png" srcset="/blog/img/loading.gif" lazyload alt="image-20211110160840233" style="zoom:50%;" />



<h4 id="2-对象语法"><a href="#2-对象语法" class="headerlink" title="2. 对象语法"></a>2. 对象语法</h4><p>对象语法与数组语法功能上面是一模一样的，只是写法上面不一样而已</p>
<p><strong>语法</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs html">&lt;标签 :class=&quot;&#123;class名称:布尔值&#125;&quot;&gt;&lt;/标签&gt;<br></code></pre></td></tr></table></figure>

<p>这个属性值如果是<code>true</code>则启用这个样式，如果是<code>false</code>则不启动用这个样式</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="css"></span><br><span class="css">    <span class="hljs-selector-tag">ul</span>&gt;<span class="hljs-selector-tag">li</span> &#123;</span><br><span class="css">        <span class="hljs-attribute">height</span>: <span class="hljs-number">40px</span>;</span><br><span class="css">        <span class="hljs-attribute">line-height</span>: <span class="hljs-number">40px</span>;</span><br><span class="css">        <span class="hljs-attribute">border</span>: <span class="hljs-number">1px</span> solid lightgray;</span><br><span class="css">        <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">4px</span>;</span><br><span class="css">    &#125;</span><br><span class="css"></span><br><span class="css"></span><br><span class="css">    <span class="hljs-selector-tag">ul</span>&gt;<span class="hljs-selector-tag">li</span><span class="hljs-selector-class">.active-1</span> &#123;</span><br><span class="css">        <span class="hljs-attribute">background-color</span>: deeppink;</span><br><span class="css">    &#125;</span><br><span class="css">    <span class="hljs-selector-class">.list-item</span>&#123;</span><br><span class="css">        <span class="hljs-attribute">font-weight</span>: bold;</span><br><span class="css">    &#125;</span><br><span class="css"></span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;app&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">ul</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">v-for</span>=<span class="hljs-string">&quot;(item,index) in stuList&quot;</span> <span class="hljs-attr">:key</span>=<span class="hljs-string">&quot;index&quot;</span></span><br><span class="hljs-tag">                <span class="hljs-attr">:class</span>=<span class="hljs-string">&quot;&#123;&#x27;active-1&#x27;:index==selectedIndex,&#x27;list-item&#x27;:index%2==0&#125;&quot;</span></span><br><span class="hljs-tag">                @<span class="hljs-attr">click</span>=<span class="hljs-string">&quot;selectedIndex=index&quot;</span>&gt;</span><br>                &#123;&#123;item&#125;&#125;<br>            <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>&#123;&#123;stuList[selectedIndex]&#125;&#125;<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./js/vue.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    <span class="hljs-keyword">new</span> Vue(&#123;</span><br><span class="javascript">        <span class="hljs-attr">el</span>: <span class="hljs-string">&quot;#app&quot;</span>,</span><br><span class="javascript">        <span class="hljs-attr">data</span>: &#123;</span><br><span class="javascript">            <span class="hljs-attr">stuList</span>: [<span class="hljs-string">&quot;杨佳琪&quot;</span>, <span class="hljs-string">&quot;陈欢欢&quot;</span>, <span class="hljs-string">&quot;刘紫微&quot;</span>, <span class="hljs-string">&quot;李光昊&quot;</span>],</span><br><span class="javascript">            <span class="hljs-attr">selectedIndex</span>: <span class="hljs-number">0</span></span><br><span class="javascript">        &#125;</span><br><span class="javascript">    &#125;)</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<h3 id="十一、vue样式style绑定"><a href="#十一、vue样式style绑定" class="headerlink" title="十一、vue样式style绑定"></a>十一、vue样式style绑定</h3><p>它的绑定方式其实与上面的<code>class</code>绑定是一样的，它也有对象语法跟数组语法，但是它的对象语法与数组语法没啥本质区域</p>
<h4 id="1-对象语法"><a href="#1-对象语法" class="headerlink" title="1. 对象语法"></a>1. 对象语法</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><code class="hljs html"> <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="css"></span><br><span class="css">     <span class="hljs-selector-class">.box</span>&#123;</span><br><span class="css">         <span class="hljs-attribute">width</span>: <span class="hljs-number">100px</span>;</span><br><span class="css">         <span class="hljs-attribute">height</span>: <span class="hljs-number">100px</span>;</span><br><span class="css">         <span class="hljs-attribute">border</span>: <span class="hljs-number">4px</span> solid black;</span><br><span class="css">     &#125;</span><br><span class="css"></span><br><span class="css"></span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;app&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;box&quot;</span> <span class="hljs-attr">:style</span>=<span class="hljs-string">&quot;&#123;backgroundColor:c&#125;&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">hr</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">ul</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">li</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">&quot;c=&#x27;red&#x27;&quot;</span>&gt;</span>红色<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">li</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">&quot;c=&#x27;blue&#x27;&quot;</span>&gt;</span>蓝色<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">li</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">&quot;c=&#x27;green&#x27;&quot;</span>&gt;</span>绿色<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">li</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">&quot;c=&#x27;pink&#x27;&quot;</span>&gt;</span>粉色<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./js/vue.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    <span class="hljs-keyword">new</span> Vue(&#123;</span><br><span class="javascript">        <span class="hljs-attr">el</span>:<span class="hljs-string">&quot;#app&quot;</span>,</span><br><span class="javascript">        <span class="hljs-attr">data</span>:&#123;</span><br><span class="javascript">            <span class="hljs-attr">c</span>:<span class="hljs-string">&quot;yellow&quot;</span></span><br><span class="javascript">        &#125;</span><br><span class="javascript">    &#125;)</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p>在上面的案例当中，我们可以看到，<code>style</code>后面属性值量 个变量，在发生变化，所以我们要使用动态的<code>:style</code>来绑定</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="css"></span><br><span class="css">    <span class="hljs-selector-class">.progress-bar</span>&#123;</span><br><span class="css">        <span class="hljs-attribute">width</span>: <span class="hljs-number">500px</span>;</span><br><span class="css">        <span class="hljs-attribute">height</span>: <span class="hljs-number">30px</span>;</span><br><span class="css">        <span class="hljs-attribute">border</span>: <span class="hljs-number">1px</span> solid lightgray;</span><br><span class="css">        <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">15px</span>;</span><br><span class="css">        <span class="hljs-attribute">background-image</span>: <span class="hljs-built_in">linear-gradient</span>(to right,red,red);</span><br><span class="css">        <span class="hljs-attribute">background-repeat</span>: no-repeat;</span><br><span class="css"></span><br><span class="css">    &#125;</span><br><span class="css"></span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;app&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;progress-bar&quot;</span> <span class="hljs-attr">:style</span>=<span class="hljs-string">&quot;&#123;backgroundSize:`$&#123;percent&#125; 100%`&#125;&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./js/vue.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    <span class="hljs-keyword">new</span> Vue(&#123;</span><br><span class="javascript">        <span class="hljs-attr">el</span>:<span class="hljs-string">&quot;#app&quot;</span>,</span><br><span class="javascript">        <span class="hljs-attr">data</span>:&#123;</span><br><span class="javascript">            <span class="hljs-attr">percent</span>:<span class="hljs-string">&quot;50%&quot;</span></span><br><span class="javascript">        &#125;</span><br><span class="javascript">    &#125;)</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p><img src="https://pic.imgdb.cn/item/618e17b82ab3f51d91d8ee47.png" srcset="/blog/img/loading.gif" lazyload alt="image-20211111105839922"></p>
<h4 id="2-数组语法"><a href="#2-数组语法" class="headerlink" title="2.数组语法"></a>2.数组语法</h4><blockquote>
<p>数组语法本质上面与对象语法很像，就是把多个对象放在了一个数组里面</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="css"></span><br><span class="css">    <span class="hljs-selector-class">.box</span> &#123;</span><br><span class="css">        <span class="hljs-attribute">width</span>: <span class="hljs-number">200px</span>;</span><br><span class="css">        <span class="hljs-attribute">height</span>: <span class="hljs-number">200px</span>;</span><br><span class="css">        <span class="hljs-attribute">border</span>: <span class="hljs-number">5px</span> solid black;</span><br><span class="css">    &#125;</span><br><span class="css"></span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;app&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;box&quot;</span> <span class="hljs-attr">:style</span>=<span class="hljs-string">&quot;[obj1,&#123;backgroundColor:c&#125;]&quot;</span>&gt;</span><br>            我是盒子<br>        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./js/vue.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    <span class="hljs-keyword">new</span> Vue(&#123;</span><br><span class="javascript">        <span class="hljs-attr">el</span>: <span class="hljs-string">&quot;#app&quot;</span>,</span><br><span class="javascript">        <span class="hljs-attr">data</span>: &#123;</span><br><span class="javascript">            <span class="hljs-attr">percent</span>: <span class="hljs-string">&quot;50%&quot;</span>,</span><br><span class="javascript">            <span class="hljs-attr">obj1</span>:&#123;</span><br><span class="javascript">                <span class="hljs-attr">color</span>:<span class="hljs-string">&#x27;red&#x27;</span></span><br><span class="javascript">            &#125;,</span><br><span class="javascript">            <span class="hljs-attr">c</span>:<span class="hljs-string">&quot;blue&quot;</span></span><br><span class="javascript">        &#125;</span><br><span class="javascript">    &#125;)</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<blockquote>
<p>这里要注意，有个易错点，有个本质点</p>
</blockquote>
<p><strong>重点</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;app&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;box&quot;</span> <span class="hljs-attr">:style</span>=<span class="hljs-string">&quot;[obj1,&#123;backgroundColor:c&#125;]&quot;</span>&gt;</span><br>            我是盒子<br>        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">&quot;aaa&quot;</span>&gt;</span>我要改变<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./js/vue.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    <span class="hljs-keyword">var</span> app = <span class="hljs-keyword">new</span> Vue(&#123;</span><br><span class="javascript">        <span class="hljs-attr">el</span>: <span class="hljs-string">&quot;#app&quot;</span>,</span><br><span class="javascript">        <span class="hljs-attr">data</span>: &#123;</span><br><span class="javascript">            <span class="hljs-attr">percent</span>: <span class="hljs-string">&quot;50%&quot;</span>,</span><br><span class="javascript">            <span class="hljs-attr">obj1</span>: &#123;</span><br><span class="javascript">                <span class="hljs-attr">color</span>: <span class="hljs-string">&#x27;red&#x27;</span>,</span><br><span class="javascript">                <span class="hljs-attr">marginLeft</span>:<span class="hljs-string">&quot;100px&quot;</span></span><br><span class="javascript">            &#125;,</span><br><span class="javascript">            <span class="hljs-attr">c</span>: <span class="hljs-string">&quot;blue&quot;</span></span><br><span class="javascript">        &#125;,</span><br><span class="javascript">        <span class="hljs-attr">methods</span>: &#123;</span><br><span class="javascript">            <span class="hljs-function"><span class="hljs-title">aaa</span>(<span class="hljs-params"></span>)</span> &#123;</span><br><span class="javascript">                <span class="hljs-built_in">this</span>.obj1.color = <span class="hljs-string">&quot;white&quot;</span>;</span><br><span class="javascript">                <span class="hljs-comment">// 当前的border-radius属性是动态添加的，原来没有</span></span><br><span class="javascript">                <span class="hljs-comment">// this.obj1.borderRadius = &quot;50px&quot;;</span></span><br><span class="javascript">                <span class="hljs-built_in">this</span>.$set(<span class="hljs-built_in">this</span>.obj1,<span class="hljs-string">&quot;borderRadius&quot;</span>,<span class="hljs-string">&quot;50px&quot;</span>);</span><br><span class="javascript"></span><br><span class="javascript">                <span class="hljs-comment">//如果需要动态删除属性，vue也不推荐直接使用delete</span></span><br><span class="javascript">                <span class="hljs-comment">// delete this.obj1.marginLeft;</span></span><br><span class="javascript">                <span class="hljs-built_in">this</span>.$delete(<span class="hljs-built_in">this</span>.obj1,<span class="hljs-string">&quot;marginLeft&quot;</span>);</span><br><span class="javascript">            &#125;</span><br><span class="javascript">        &#125;</span><br><span class="javascript">    &#125;)</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<blockquote>
<p>在上面的代码里面，如果vue的data对象里面需要动态的添加属性，那么，不建议直接扩展或删除，而应该使用下面的两个方法</p>
<ol>
<li><code>this.$set(target,propertyName,value)</code>添加一个新的属性</li>
<li><code>this.$delete(target,propertyName)</code>删除一个属性</li>
</ol>
<p>这两个方法主要的作用和就是用于后面如果新增的属性没有与页面实现双向绑定，就可以使用它们</p>
</blockquote>
<h3 id="十二、this-set及this-delete"><a href="#十二、this-set及this-delete" class="headerlink" title="十二、this.$set及this.$delete"></a>十二、this.$set及this.$delete</h3><p><strong>案例</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><code class="hljs html"> <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="css"></span><br><span class="css">     <span class="hljs-selector-class">.box</span> &#123;</span><br><span class="css">         <span class="hljs-attribute">width</span>: <span class="hljs-number">200px</span>;</span><br><span class="css">         <span class="hljs-attribute">height</span>: <span class="hljs-number">200px</span>;</span><br><span class="css">         <span class="hljs-attribute">border</span>: <span class="hljs-number">5px</span> solid black;</span><br><span class="css">         <span class="hljs-attribute">background-color</span>: deeppink;</span><br><span class="css">     &#125;</span><br><span class="css"></span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;app&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">&quot;aaa&quot;</span>&gt;</span>我要改变<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;box&quot;</span> <span class="hljs-attr">v-show</span>=<span class="hljs-string">&quot;obj.flag&quot;</span>&gt;</span><br>            我是盒子<br>        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./js/vue.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    <span class="hljs-keyword">new</span> Vue(&#123;</span><br><span class="javascript">        <span class="hljs-attr">el</span>: <span class="hljs-string">&quot;#app&quot;</span>,</span><br><span class="javascript">        <span class="hljs-attr">data</span>: &#123;</span><br><span class="javascript">            <span class="hljs-attr">obj</span>: &#123;</span><br><span class="javascript"></span><br><span class="javascript">            &#125;</span><br><span class="javascript">        &#125;,</span><br><span class="javascript">        <span class="hljs-attr">methods</span>: &#123;</span><br><span class="javascript">            <span class="hljs-function"><span class="hljs-title">aaa</span>(<span class="hljs-params"></span>)</span> &#123;</span><br><span class="javascript">                <span class="hljs-comment">//this.obj.flag = true;   //这里是没有效果的</span></span><br><span class="javascript">                </span><br><span class="javascript">                <span class="hljs-comment">//下面的代码是有效果的</span></span><br><span class="javascript">                <span class="hljs-built_in">this</span>.$set(<span class="hljs-built_in">this</span>.obj, <span class="hljs-string">&quot;flag&quot;</span>, <span class="hljs-literal">true</span>);</span><br><span class="javascript">                <span class="hljs-built_in">console</span>.log(<span class="hljs-built_in">this</span>.obj)</span><br><span class="javascript">            &#125;</span><br><span class="javascript">        &#125;</span><br><span class="javascript">    &#125;)</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<blockquote>
<p>在上面的代码里同，我们使用<code>v-show=&quot;obj.flag&quot;</code>来让元素显示，但是<code>obj</code>下面并没有<code>flag</code>属性，所以盒子默认被不显示</p>
<p>但是如果我们后期通过<code>this.obj.flag = ture</code>动态扩展一个属性，页面上面的盒子没有显示，这就是<code>bug</code></p>
<p>为了解决这个问题，vue推荐如果是新加的属性要实现双向数据绑定则必须使用<code>this.$set()</code>来完成</p>
<p>关于原理，在vue的生命周期里面会讲到这一块</p>
</blockquote>
<h3 id="十三、vue过滤器"><a href="#十三、vue过滤器" class="headerlink" title="十三、vue过滤器"></a>十三、vue过滤器</h3><p>vue当中的过滤器称之为数据格式化工具，也称之为数据渲染的时候处理工具，它可以在数据渲染的时候二次处理数据</p>
<p>过渡器分为两种，一种是全局过滤器，一咱是局部过滤器，无论是哪种其实调用方法都是一样，这个全局和局部指的是后期的<strong>组件化开发</strong>里面使用的</p>
<h4 id="1-全局过滤器"><a href="#1-全局过滤器" class="headerlink" title="1. 全局过滤器"></a>1. 全局过滤器</h4><p>全局过滤器使用<code>Vue.filter(&quot;过滤器名称&quot;,方法名)</code>来定义，调用的时候直接在数据渲染的过程当中使用<code>| 过滤器名称</code>即可</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;app&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">table</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;table-box&quot;</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">tr</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">th</span>&gt;</span>姓名<span class="hljs-tag">&lt;/<span class="hljs-name">th</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">th</span>&gt;</span>性别<span class="hljs-tag">&lt;/<span class="hljs-name">th</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">th</span>&gt;</span>生日<span class="hljs-tag">&lt;/<span class="hljs-name">th</span>&gt;</span><br>            <span class="hljs-tag">&lt;/<span class="hljs-name">tr</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">tr</span> <span class="hljs-attr">v-for</span>=<span class="hljs-string">&quot;(item,index) in stuList&quot;</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>&#123;&#123;item.stuName&#125;&#125;<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>&#123;&#123;item.sex&#125;&#125;<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>&#123;&#123;item.birthday | formatDate&#125;&#125;<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span><br>            <span class="hljs-tag">&lt;/<span class="hljs-name">tr</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">table</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./js/vue.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    <span class="hljs-comment">/**</span></span><br><span class="hljs-comment"><span class="javascript">     * <span class="hljs-doctag">@param <span class="hljs-type">&#123;Date&#125;</span> </span>_d 要格式化的日期</span></span><br><span class="hljs-comment"><span class="javascript">     */</span></span><br><span class="javascript">    <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">formatDate</span>(<span class="hljs-params">_d</span>) </span>&#123;</span><br><span class="javascript">        <span class="hljs-comment">//假设_d是一个日期对象</span></span><br><span class="javascript">        <span class="hljs-keyword">let</span> year = _d.getFullYear();</span><br><span class="javascript">        <span class="hljs-keyword">let</span> month = _d.getMonth() + <span class="hljs-number">1</span>;</span><br><span class="javascript">        <span class="hljs-keyword">let</span> date = _d.getDate();</span><br><span class="javascript">        <span class="hljs-keyword">return</span> <span class="hljs-string">`<span class="hljs-subst">$&#123;year&#125;</span>年<span class="hljs-subst">$&#123;month&#125;</span>月<span class="hljs-subst">$&#123;date&#125;</span>日`</span>;</span><br><span class="javascript">    &#125;</span><br><span class="javascript"></span><br><span class="javascript">    Vue.filter(<span class="hljs-string">&quot;formatDate&quot;</span>,formatDate);</span><br><span class="javascript"></span><br><span class="javascript">    <span class="hljs-keyword">new</span> Vue(&#123;</span><br><span class="javascript">        <span class="hljs-attr">el</span>: <span class="hljs-string">&quot;#app&quot;</span>,</span><br><span class="javascript">        <span class="hljs-attr">data</span>: &#123;</span><br><span class="javascript">            <span class="hljs-attr">stuList</span>: [&#123;</span><br><span class="javascript">                    <span class="hljs-attr">stuName</span>: <span class="hljs-string">&quot;季强&quot;</span>,</span><br><span class="javascript">                    <span class="hljs-attr">sex</span>: <span class="hljs-string">&quot;男&quot;</span>,</span><br><span class="javascript">                    <span class="hljs-attr">birthday</span>: <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>(<span class="hljs-string">&quot;2020-1-12&quot;</span>)</span><br><span class="javascript">                &#125;,</span><br><span class="javascript">            ]</span><br><span class="javascript">        &#125;</span><br><span class="javascript">    &#125;)</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<blockquote>
<p>在上面的代码当中，我们可以看到，日期已经被格式化了</p>
</blockquote>
<h4 id="2-局部过滤器"><a href="#2-局部过滤器" class="headerlink" title="2. 局部过滤器"></a>2. 局部过滤器</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br></pre></td><td class="code"><pre><code class="hljs javascript">  <span class="hljs-comment">/**</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@param <span class="hljs-type">&#123;Date&#125;</span> </span>_d 要格式化的日期</span><br><span class="hljs-comment">     */</span><br><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">formatDate</span>(<span class="hljs-params">_d</span>) </span>&#123;<br>    <span class="hljs-comment">//假设_d是一个日期对象</span><br>    <span class="hljs-keyword">let</span> year = _d.getFullYear();<br>    <span class="hljs-keyword">let</span> month = _d.getMonth() + <span class="hljs-number">1</span>;<br>    <span class="hljs-keyword">let</span> date = _d.getDate();<br>    <span class="hljs-keyword">return</span> <span class="hljs-string">`<span class="hljs-subst">$&#123;year&#125;</span>年<span class="hljs-subst">$&#123;month&#125;</span>月<span class="hljs-subst">$&#123;date&#125;</span>日`</span>;<br>&#125;<br><br><span class="hljs-keyword">new</span> Vue(&#123;<br>    <span class="hljs-attr">el</span>: <span class="hljs-string">&quot;#app&quot;</span>,<br>    <span class="hljs-attr">data</span>: &#123;<br>        <span class="hljs-attr">stuList</span>: [&#123;<br>            <span class="hljs-attr">stuName</span>: <span class="hljs-string">&quot;季强&quot;</span>,<br>            <span class="hljs-attr">sex</span>: <span class="hljs-string">&quot;男&quot;</span>,<br>            <span class="hljs-attr">birthday</span>: <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>(<span class="hljs-string">&quot;2020-1-12&quot;</span>)<br>        &#125;,<br>                  &#123;<br>                      <span class="hljs-attr">stuName</span>: <span class="hljs-string">&quot;陈欢欢&quot;</span>,<br>                      <span class="hljs-attr">sex</span>: <span class="hljs-string">&quot;女&quot;</span>,<br>                      <span class="hljs-attr">birthday</span>: <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>(<span class="hljs-string">&quot;1990-1-12&quot;</span>)<br>                  &#125;,<br>                  &#123;<br>                      <span class="hljs-attr">stuName</span>: <span class="hljs-string">&quot;喻金&quot;</span>,<br>                      <span class="hljs-attr">sex</span>: <span class="hljs-string">&quot;男&quot;</span>,<br>                      <span class="hljs-attr">birthday</span>: <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>(<span class="hljs-string">&quot;1998-3-3&quot;</span>)<br>                  &#125;,<br>                  &#123;<br>                      <span class="hljs-attr">stuName</span>: <span class="hljs-string">&quot;杨佳琪&quot;</span>,<br>                      <span class="hljs-attr">sex</span>: <span class="hljs-string">&quot;男&quot;</span>,<br>                      <span class="hljs-attr">birthday</span>: <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>(<span class="hljs-string">&quot;2001-12-24&quot;</span>)<br>                  &#125;,<br>                  &#123;<br>                      <span class="hljs-attr">stuName</span>: <span class="hljs-string">&quot;松明大哥&quot;</span>,<br>                      <span class="hljs-attr">sex</span>: <span class="hljs-string">&quot;男&quot;</span>,<br>                      <span class="hljs-attr">birthday</span>: <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>(<span class="hljs-string">&quot;2003-6-30&quot;</span>)<br>                  &#125;,<br>                 ]<br>    &#125;,<br>    <span class="hljs-attr">filters</span>:&#123;<br>        formatDate<br>    &#125;<br>&#125;)<br></code></pre></td></tr></table></figure>

<p>上面的代码就是局部过滤器，它可以在vue的内部通过属性<code>filters</code>来完成</p>
<h4 id="3-过滤器当中的参数"><a href="#3-过滤器当中的参数" class="headerlink" title="3. 过滤器当中的参数"></a>3. 过滤器当中的参数</h4><p>在上面的过滤器里面，我们可以看过滤器函数里面的<strong>第一个参数永远都是要处理的内容</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">formatText</span>(<span class="hljs-params">str,maxLength = <span class="hljs-number">10</span></span>) </span>&#123;<br>    <span class="hljs-comment">//假设最多只显示10个字符</span><br>    <span class="hljs-keyword">if</span> (str) &#123;<br>        <span class="hljs-keyword">return</span> str.length &gt; <span class="hljs-number">10</span> ? str.substr(<span class="hljs-number">0</span>, maxLength) + <span class="hljs-string">&quot;...&quot;</span> : str;<br>    &#125; <span class="hljs-keyword">else</span> &#123;<br>        <span class="hljs-keyword">return</span> <span class="hljs-string">&quot;&quot;</span>;<br>    &#125;<br>&#125;<br><br>Vue.filter(<span class="hljs-string">&quot;formatText&quot;</span>,formatText);<br></code></pre></td></tr></table></figure>

<p>在上面的过滤器里面，我定义了两个参数，第一个参数永远都是要处理的内容，从第二个参数开始就是调用过滤器的时候参数，如下</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>&#123;&#123;item.desc | formatText(15)&#125;&#125;<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span><br></code></pre></td></tr></table></figure>

<h3 id="十四、vue的DOM操作"><a href="#十四、vue的DOM操作" class="headerlink" title="十四、vue的DOM操作"></a>十四、vue的DOM操作</h3><p>vue的本质是去DOM操作，但是为什么还会有dom操作的点呢？</p>
<p>因为vue不推荐设置DOM，但是某些特殊情况下，我们要获取dom元素的属性，如<code>clientWidth/clientHeight</code>，或<code>offsetWidth/offsetHeight</code>,及<code>scrollWidth/scrollHeight</code>等</p>
<p>在原生的JS里面，如果我们要操作DOM，前提是获取DOM，原生JS里面使用<code>document.querySelector/document.querySelectorAll</code>等方法</p>
<h4 id="1-通过ref来获取DOM"><a href="#1-通过ref来获取DOM" class="headerlink" title="1. 通过ref来获取DOM"></a>1. 通过<code>ref</code>来获取DOM</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;app&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">h2</span> <span class="hljs-attr">ref</span>=<span class="hljs-string">&quot;pageTitle&quot;</span>&gt;</span>这是一个标题<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">&quot;aaa&quot;</span>&gt;</span>按钮<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./js/vue.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    <span class="hljs-keyword">new</span> Vue(&#123;</span><br><span class="javascript">        <span class="hljs-attr">el</span>: <span class="hljs-string">&quot;#app&quot;</span>,</span><br><span class="javascript">        <span class="hljs-attr">data</span>: &#123;</span><br><span class="javascript">            </span><br><span class="javascript">        &#125;,</span><br><span class="javascript">        <span class="hljs-attr">methods</span>: &#123;</span><br><span class="javascript">            <span class="hljs-function"><span class="hljs-title">aaa</span>(<span class="hljs-params"></span>)</span>&#123;</span><br><span class="javascript">                <span class="hljs-built_in">console</span>.log(<span class="hljs-built_in">this</span>.$refs[<span class="hljs-string">&quot;pageTitle&quot;</span>])</span><br><span class="javascript">            &#125;</span><br><span class="javascript">        &#125;</span><br><span class="javascript">    &#125;)</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p>所以标记了<code>ref</code>属性的DOM元素都可以后期在<code>this.$refs</code>里面找到</p>
<p><strong>注意事项</strong></p>
<p>当<code>v-for</code>遍历批量生成的时候，<code>ref</code>有一点小小的区别</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;app&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">h2</span> <span class="hljs-attr">v-for</span>=<span class="hljs-string">&quot;(item,index) in txtList&quot;</span> <span class="hljs-attr">ref</span>=<span class="hljs-string">&quot;pageTitle&quot;</span>&gt;</span><br>            &#123;&#123;item&#125;&#125;<br>        <span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">&quot;aaa&quot;</span>&gt;</span>按钮<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./js/vue.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    <span class="hljs-keyword">new</span> Vue(&#123;</span><br><span class="javascript">        <span class="hljs-attr">el</span>: <span class="hljs-string">&quot;#app&quot;</span>,</span><br><span class="javascript">        <span class="hljs-attr">data</span>: &#123;</span><br><span class="javascript">            <span class="hljs-attr">txtList</span>: [<span class="hljs-string">&quot;张珊&quot;</span>, <span class="hljs-string">&quot;李四&quot;</span>, <span class="hljs-string">&quot;王五&quot;</span>]</span><br><span class="javascript">        &#125;,</span><br><span class="javascript">        <span class="hljs-attr">methods</span>: &#123;</span><br><span class="javascript">            <span class="hljs-function"><span class="hljs-title">aaa</span>(<span class="hljs-params"></span>)</span> &#123;</span><br><span class="javascript">                <span class="hljs-built_in">console</span>.log(<span class="hljs-built_in">this</span>.$refs[<span class="hljs-string">&quot;pageTitle&quot;</span>])</span><br><span class="javascript">            &#125;</span><br><span class="javascript">        &#125;</span><br><span class="javascript">    &#125;)</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<blockquote>
<p>只要是通过<code>v-for</code>来生成的元素，它通过<code>this.$refs[xxx]</code>得到的就是一个数组</p>
</blockquote>
<h4 id="2-通过事件对象"><a href="#2-通过事件对象" class="headerlink" title="2. 通过事件对象"></a>2. 通过事件对象</h4><p>通过触发事件，我们可以得到事件对象<code>$event</code>，而事件对象上面又可以获取事件的绑定者和触发者</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">&quot;aaa($event)&quot;</span>&gt;</span>按钮<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    <span class="hljs-keyword">new</span> Vue(&#123;</span><br><span class="javascript">        <span class="hljs-attr">el</span>: <span class="hljs-string">&quot;#app&quot;</span>,</span><br><span class="javascript">        <span class="hljs-attr">data</span>: &#123;</span><br><span class="javascript">            <span class="hljs-attr">txtList</span>: [<span class="hljs-string">&quot;张珊&quot;</span>, <span class="hljs-string">&quot;李四&quot;</span>, <span class="hljs-string">&quot;王五&quot;</span>]</span><br><span class="javascript">        &#125;,</span><br><span class="javascript">        <span class="hljs-attr">methods</span>: &#123;</span><br><span class="javascript">            <span class="hljs-function"><span class="hljs-title">aaa</span>(<span class="hljs-params">event</span>)</span> &#123;</span><br><span class="javascript">                <span class="hljs-built_in">console</span>.log(<span class="hljs-built_in">this</span>.$refs[<span class="hljs-string">&quot;pageTitle&quot;</span>]);</span><br><span class="javascript">                <span class="hljs-comment">//通过事件对象，找到了事件的绑定者</span></span><br><span class="javascript">                <span class="hljs-built_in">console</span>.log(event.currentTarget);</span><br><span class="javascript">            &#125;</span><br><span class="javascript">        &#125;</span><br><span class="javascript">    &#125;)</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<h2 id="2-Vue的组件化开发"><a href="#2-Vue的组件化开发" class="headerlink" title="2.Vue的组件化开发"></a>2.Vue的组件化开发</h2><p>在现行的MVVM数据驱动页面的框架里面（<code>vue/react/angular</code>），它们都是支持组件化开发的，组件化开发也叫虚拟dom(<code>virtual-dom</code>)开发</p>
<h3 id="一、存在的问题"><a href="#一、存在的问题" class="headerlink" title="一、存在的问题"></a>一、存在的问题</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;app&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;list-group&quot;</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>张三<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>李四<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>王五<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;list-group&quot;</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>张三<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>李四<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>王五<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;list-group&quot;</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>张三<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>李四<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>王五<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p>我们平常在做开发的时候，有时候发现页面上面有很多布局或结构都是相同的时候，我们不得不把这些代码都写一次，然后复制粘贴 ，这样代码会变得非常多</p>
<p><img src="https://pic.imgdb.cn/item/618e186c2ab3f51d91d92ba8.png" srcset="/blog/img/loading.gif" lazyload alt="image-20211111135216630"></p>
<p>这个时候代码的冗余量会非常大。按照我们之前的思路，我们会想到封装。现在的问题就是HTML是否可以封装？</p>
<h3 id="二、关于virtual-DOM"><a href="#二、关于virtual-DOM" class="headerlink" title="二、关于virtual DOM"></a>二、关于virtual DOM</h3><p>在上一个章节，我们其实已经得到了一个问题，如果HTML标签要是能够 封装，那就可以解决这个问题，现在的vue框架就可以实现这样效果</p>
<p>在vue里面，有两个核心点</p>
<ol>
<li>数据驱动页面</li>
<li>虚拟DOM（<code>virtual-dom</code>）开发，这一种开发就是组件化的开发</li>
</ol>
<p>到底什么是virutal-dom，我们现在来尝试一下</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;app&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">user-list</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">user-list</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">hr</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">user-list</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">user-list</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">hr</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">user-list</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">user-list</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><br><br>    <span class="hljs-comment">&lt;!-- template不能在托管区域里面 --&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;temp1&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;list-group&quot;</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>张三<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>李四<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>王五<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./js/vue.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    Vue.component(<span class="hljs-string">&quot;user-list&quot;</span>,&#123;</span><br><span class="javascript">        <span class="hljs-attr">template</span>:<span class="hljs-string">&quot;#temp1&quot;</span></span><br><span class="javascript">    &#125;)</span><br><span class="javascript">    <span class="hljs-keyword">new</span> Vue(&#123;</span><br><span class="javascript">        <span class="hljs-attr">el</span>:<span class="hljs-string">&quot;#app&quot;</span>,</span><br><span class="javascript">        <span class="hljs-attr">data</span>:&#123;</span><br><span class="javascript">            </span><br><span class="javascript">        &#125;</span><br><span class="javascript">    &#125;)</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p>这个时候我们通过上面的代码就已经实现之前对HTML的封装</p>
<blockquote>
<p><strong>代码说明</strong>：</p>
<ol>
<li>要把所有封装的<code>html</code>放在<code>&lt;template&gt;</code>的标签里面，并且定义一个不重复的id</li>
<li>在JS里面要通过<code>Vue.component()</code>这个方法来注释一个组件，名叫<code>user-list</code>的虚拟标签</li>
<li>在HTML的页在上面通过使用<code>&lt;user-list&gt;&lt;/user-list&gt;</code>来调用这个组件</li>
</ol>
<p>这个时候我们就可以看到，在网页当中本身是没有<code>&lt;user-list&gt;</code>这一个标签的，但是现在又有了这个标签，所以这个标签应该算是一个虚拟的标签，这种技术就叫<code>virtual-dom</code>开发，也就是组件化开发</p>
</blockquote>
<p>在前端的三大框架里都支持组件化的<code>virtual-dom</code>开发，但是都有一些共同的特点</p>
<p><strong>注意事项</strong></p>
<ol>
<li>组名的名称（<code>virutal-dom</code>的名称）不能是html里面已经存在的标签名称</li>
<li>组个名称如果是驼峰命名的，则需要进行转义操作，如<code>userList</code>就会转义成<code>&lt;user-list&gt;</code></li>
<li><code>template</code>不能写在vue的托管区域里面</li>
<li><code>template</code>标签下面是不支持片段代码的，通俗一点就是只能有一个根标签</li>
</ol>
<p><span style="color:blue;font-weight:bold;text-decoration:wavy red underline">标哥特别提醒：vue的组件其实可以看成是一个小型的vue</span></p>
<h3 id="三、全局组件"><a href="#三、全局组件" class="headerlink" title="三、全局组件"></a>三、全局组件</h3><blockquote>
<p>顾名思义全局组件就是可以在全局范围内使用的</p>
</blockquote>
<p>全局组件使用<code>Vue.component</code>这个方法来实现的，上一个章节的内部就是全局组件</p>
<ol>
<li><p>先准备一个<code>&lt;tempalte&gt;</code>标签，然后设置一个id,把要封装的html写在里面去</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;temp1&quot;</span>&gt;</span>     <br><span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p>当然上面的<code>&lt;template&gt;</code>也可以换成<code>&lt;script type=&quot;text/template&quot; id=&quot;temp1&quot;&gt;</code></p>
<p>千万千万记得，不能放在托管区域里在，也不能有片段代码</p>
</li>
<li><p>在js代码当调调用<code>Vue.component</code>方法，把之前定义的HTML代码变成是一个组件</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs javascript">Vue.component(<span class="hljs-string">&quot;c&quot;</span>, &#123;<br>    <span class="hljs-attr">template</span>: <span class="hljs-string">&quot;#temp1&quot;</span><br>&#125;);<br></code></pre></td></tr></table></figure>

</li>
</ol>
<p>:books: <strong>案例</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-meta-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;zh&quot;</span>&gt;</span><br><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">http-equiv</span>=<span class="hljs-string">&quot;X-UA-Compatible&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;IE=edge&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;viewport&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>全局组件<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="css"></span><br><span class="css">        <span class="hljs-selector-class">.box</span>&#123;</span><br><span class="css">            <span class="hljs-attribute">border</span>: <span class="hljs-number">1px</span> solid black;</span><br><span class="css">            <span class="hljs-attribute">margin</span>: <span class="hljs-number">10px</span>;</span><br><span class="css">        &#125;</span><br><span class="css">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;app&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">one</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">one</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;temp1&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;box&quot;</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>我是第一个组件<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">two</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">two</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">three</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">three</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;temp2&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;box&quot;</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>我是第二个组件<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">three</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">three</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;temp3&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;box&quot;</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>我是第三个组件<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./js/vue.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">   </span><br><span class="javascript">    Vue.component(<span class="hljs-string">&quot;one&quot;</span>,&#123;</span><br><span class="javascript">        <span class="hljs-attr">template</span>:<span class="hljs-string">&quot;#temp1&quot;</span></span><br><span class="javascript">    &#125;);</span><br><span class="javascript">    Vue.component(<span class="hljs-string">&quot;two&quot;</span>,&#123;</span><br><span class="javascript">        <span class="hljs-attr">template</span>:<span class="hljs-string">&quot;#temp2&quot;</span></span><br><span class="javascript">    &#125;);</span><br><span class="javascript">    Vue.component(<span class="hljs-string">&quot;three&quot;</span>,&#123;</span><br><span class="javascript">        <span class="hljs-attr">template</span>:<span class="hljs-string">&quot;#temp3&quot;</span></span><br><span class="javascript">    &#125;);</span><br><span class="javascript"></span><br><span class="javascript">    <span class="hljs-keyword">new</span> Vue(&#123;</span><br><span class="javascript">        <span class="hljs-attr">el</span>: <span class="hljs-string">&quot;#app&quot;</span></span><br><span class="javascript">    &#125;)</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span> <br></code></pre></td></tr></table></figure>

<p><img src="https://pic.imgdb.cn/item/618e188f2ab3f51d91d93efb.png" srcset="/blog/img/loading.gif" lazyload alt="image-20211111142835879"></p>
<p>上面就是一个最典型的全局组件的案例，全局组件只要注册成功，就可以在任何范围内使用</p>
<h3 id="四、局部组件"><a href="#四、局部组件" class="headerlink" title="四、局部组件"></a>四、局部组件</h3><blockquote>
<p>顾名思义就是只可以在局部范围内使用，这一点正好是与全局组件相反</p>
</blockquote>
<p>在学习局部组件的时候，请同样一定记住一句话<strong>vue的组件其实可以看成是一个小型的vue</strong></p>
<ol>
<li><p>编写一个<code>&lt;template&gt;</code>的区域，这一点与全局组件相同</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;temp1&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>这是一个组件<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span><br></code></pre></td></tr></table></figure>
</li>
<li><p>创建一个对象，指定组件的接管区域【这一点与vue很像，vue是通过<code>el</code>属性去接管，而组件是通过<code>tempalte</code>属性接管】</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> one = &#123;<br>    <span class="hljs-attr">template</span>: <span class="hljs-string">&quot;#temp1&quot;</span><br>&#125;<br></code></pre></td></tr></table></figure>

<p>当上面的代码完成了以后，它还仅仅只是一个对象</p>
</li>
<li><p>要在哪里使用就在哪里把这个对象注册成一个组件</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">new</span> Vue(&#123;<br>    <span class="hljs-attr">el</span>: <span class="hljs-string">&quot;#app&quot;</span>,<br>    <span class="hljs-attr">components</span>:&#123;<br>        <span class="hljs-attr">userList</span>:one<br>    &#125;<br>&#125;)<br></code></pre></td></tr></table></figure>

</li>
</ol>
<p>局部组件本身是一个对象，在使用之前一定要注册</p>
<p>:closed_book: <strong>案例</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;app&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">one</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">one</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;temp1&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;box&quot;</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>第一个组件<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">two</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">two</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">three</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">three</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;temp2&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;box&quot;</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>第二个组件<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">three</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">three</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;temp3&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;box&quot;</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>第三个组件<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./js/vue.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    </span><br><span class="javascript">    <span class="hljs-keyword">var</span> three = &#123;</span><br><span class="javascript">        <span class="hljs-attr">template</span>:<span class="hljs-string">&quot;#temp3&quot;</span></span><br><span class="javascript">    &#125;;</span><br><span class="javascript"></span><br><span class="javascript">    <span class="hljs-keyword">var</span> two = &#123;</span><br><span class="javascript">        <span class="hljs-attr">template</span>:<span class="hljs-string">&quot;#temp2&quot;</span>,</span><br><span class="javascript">        <span class="hljs-attr">components</span>:&#123;</span><br><span class="javascript">            three</span><br><span class="javascript">        &#125;</span><br><span class="javascript">    &#125;;</span><br><span class="javascript"></span><br><span class="javascript">    <span class="hljs-keyword">var</span> one = &#123;</span><br><span class="javascript">        <span class="hljs-attr">template</span>:<span class="hljs-string">&quot;#temp1&quot;</span>,</span><br><span class="javascript">        <span class="hljs-attr">components</span>:&#123;</span><br><span class="javascript">            two,three</span><br><span class="javascript">        &#125;</span><br><span class="javascript">    &#125;;</span><br><span class="javascript">    <span class="hljs-keyword">new</span> Vue(&#123;</span><br><span class="javascript">        <span class="hljs-attr">el</span>: <span class="hljs-string">&quot;#app&quot;</span>,</span><br><span class="javascript">        <span class="hljs-attr">components</span>:&#123;</span><br><span class="javascript">            one</span><br><span class="javascript">        &#125;</span><br><span class="javascript">    &#125;)</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p><img src="https://pic.imgdb.cn/item/618e18a42ab3f51d91d943a9.png" srcset="/blog/img/loading.gif" lazyload alt="image-20211111144400783"></p>
<p>局部组件在使用之前一定要事先注册一下，而注册的方法很简单，把封装组件的对象放在<code>components</code>属性下面即可</p>
<h3 id="五、组件中的数据"><a href="#五、组件中的数据" class="headerlink" title="五、组件中的数据"></a>五、组件中的数据</h3><p>一个组件其实就是一个小型的vue,组件的内部也是可以有数据，也是可以有方法，也是可以有事件等</p>
<p>vue的组件与组件之前，及vue的内部都是相互独立，相互隔离，默认不进行相互通信，通过下面的例子可以看到</p>
<h4 id="1-组件内部的事件"><a href="#1-组件内部的事件" class="headerlink" title="1. 组件内部的事件"></a>1. 组件内部的事件</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;app&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">&quot;sayHello&quot;</span>&gt;</span>外边的铵钮<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">hr</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">one</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">one</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;temp1&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">&quot;sayHello&quot;</span>&gt;</span>按钮<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./js/vue.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    <span class="hljs-keyword">var</span> one = &#123;</span><br><span class="javascript">        <span class="hljs-attr">template</span>: <span class="hljs-string">&quot;#temp1&quot;</span>,</span><br><span class="javascript">        <span class="hljs-attr">methods</span>:&#123;</span><br><span class="javascript">            <span class="hljs-function"><span class="hljs-title">sayHello</span>(<span class="hljs-params"></span>)</span>&#123;</span><br><span class="javascript">                alert(<span class="hljs-string">&quot;我是内部的方法&quot;</span>)</span><br><span class="javascript">            &#125;</span><br><span class="javascript">        &#125;</span><br><span class="javascript">    &#125;</span><br><span class="javascript">    <span class="hljs-keyword">new</span> Vue(&#123;</span><br><span class="javascript">        <span class="hljs-attr">el</span>: <span class="hljs-string">&quot;#app&quot;</span>,</span><br><span class="javascript">        <span class="hljs-attr">methods</span>: &#123;</span><br><span class="javascript">            <span class="hljs-function"><span class="hljs-title">sayHello</span>(<span class="hljs-params"></span>)</span> &#123;</span><br><span class="javascript">                alert(<span class="hljs-string">&quot;我是外边的方法&quot;</span>)</span><br><span class="javascript">            &#125;</span><br><span class="javascript">        &#125;,</span><br><span class="javascript">        <span class="hljs-attr">components</span>: &#123;</span><br><span class="javascript">            one</span><br><span class="javascript">        &#125;</span><br><span class="javascript">    &#125;)</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<blockquote>
<p>在上面的代码里面， 我们可以看到，组件内部的也是可以有方法的，它的方法和vue里面的方法是一样的</p>
</blockquote>
<h4 id="2-组件自身数据"><a href="#2-组件自身数据" class="headerlink" title="2. 组件自身数据"></a>2. 组件自身数据</h4><pre><code class=" mermaid">graph TD
A[组件的数据]--&gt;B(内部自己的数据)
A--&gt;C(外部给我的数据)
</code></pre>



<p>如果一个组件的内部需要数据是可以自己产生的，这一点与<code>vue</code>很像，但是语法上面又有一些区别 ，它内部也有一个<code>data</code>属性，但组件内部的<code>data</code>是一个方法，这个方法所返回的对象才是真正的组件数据</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;app&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>&#123;&#123;userName&#125;&#125;<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">hr</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">one</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">one</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;temp1&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">h3</span>&gt;</span>组件内的姓名：&#123;&#123;stuName&#125;&#125;<span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">ul</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">v-for</span>=<span class="hljs-string">&quot;(item,index) in list&quot;</span> <span class="hljs-attr">:key</span>=<span class="hljs-string">&quot;index&quot;</span>&gt;</span>&#123;&#123;item&#125;&#125;<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>            <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./js/vue.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    <span class="hljs-keyword">var</span> one = &#123;</span><br><span class="javascript">        <span class="hljs-attr">template</span>: <span class="hljs-string">&quot;#temp1&quot;</span>,</span><br><span class="javascript">        <span class="hljs-function"><span class="hljs-title">data</span>(<span class="hljs-params"></span>)</span>&#123;</span><br><span class="javascript">            <span class="hljs-keyword">return</span> &#123;</span><br><span class="javascript">                <span class="hljs-attr">stuName</span>:<span class="hljs-string">&quot;陈欢欢&quot;</span>,</span><br><span class="javascript">                <span class="hljs-attr">list</span>:[<span class="hljs-string">&quot;a&quot;</span>,<span class="hljs-string">&quot;b&quot;</span>,<span class="hljs-string">&quot;c&quot;</span>,<span class="hljs-string">&quot;d&quot;</span>]</span><br><span class="javascript">            &#125;</span><br><span class="javascript">        &#125;</span><br><span class="javascript">    &#125;</span><br><span class="javascript">    <span class="hljs-keyword">new</span> Vue(&#123;</span><br><span class="javascript">        <span class="hljs-attr">el</span>: <span class="hljs-string">&quot;#app&quot;</span>,</span><br><span class="javascript">        <span class="hljs-attr">data</span>:&#123;</span><br><span class="javascript">            <span class="hljs-attr">userName</span>:<span class="hljs-string">&quot;张三&quot;</span></span><br><span class="javascript">        &#125;,</span><br><span class="javascript">        <span class="hljs-attr">components</span>: &#123;</span><br><span class="javascript">            one</span><br><span class="javascript">        &#125;</span><br><span class="javascript">    &#125;)</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<h4 id="3-组件接收外部数据"><a href="#3-组件接收外部数据" class="headerlink" title="3. 组件接收外部数据"></a>3. 组件接收外部数据</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;app&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">list-box</span> <span class="hljs-attr">:aaa</span>=<span class="hljs-string">&quot;[&#x27;a&#x27;,&#x27;b&#x27;,&#x27;c&#x27;]&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">list-box</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;temp1&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><br>            &#123;&#123;aaa&#125;&#125;<br>        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./js/vue.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    <span class="hljs-comment">// 数据要么在自身，要么从外边拿</span></span><br><span class="javascript">    <span class="hljs-keyword">let</span> listBox = &#123;</span><br><span class="javascript">        <span class="hljs-attr">template</span>: <span class="hljs-string">&quot;#temp1&quot;</span>,</span><br><span class="javascript">        <span class="hljs-attr">props</span>:&#123;</span><br><span class="javascript">            <span class="hljs-attr">aaa</span>:&#123;</span><br><span class="javascript">                <span class="hljs-attr">type</span>:<span class="hljs-built_in">Array</span>,</span><br><span class="javascript">                <span class="hljs-attr">required</span>:<span class="hljs-literal">true</span></span><br><span class="javascript">            &#125;</span><br><span class="javascript">        &#125;,</span><br><span class="javascript">        <span class="hljs-function"><span class="hljs-title">data</span>(<span class="hljs-params"></span>)</span> &#123;</span><br><span class="javascript">            <span class="hljs-keyword">return</span> &#123;</span><br><span class="javascript">                </span><br><span class="javascript">            &#125;</span><br><span class="javascript">        &#125;</span><br><span class="javascript">    &#125;</span><br><span class="javascript">    <span class="hljs-keyword">new</span> Vue(&#123;</span><br><span class="javascript">        <span class="hljs-attr">el</span>: <span class="hljs-string">&quot;#app&quot;</span>,</span><br><span class="javascript">        <span class="hljs-attr">data</span>: &#123;</span><br><span class="javascript">        &#125;,</span><br><span class="javascript">        <span class="hljs-attr">components</span>: &#123;</span><br><span class="javascript">            listBox</span><br><span class="javascript">        &#125;</span><br><span class="javascript">    &#125;)</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<blockquote>
<p>在上面的代码当中，我们可以看到，组件内部有一个数据<code>aaa</code>是从外边获取到的数据</p>
<p>在组件的内部通过<code>props</code>来接收传递过来的值，<code>type</code>表示接收的数据类型，<code>requierd</code>表示这个值必须要传给我</p>
</blockquote>
<p>在接收值的时候其实也是有两种语法的，一种是对象语法，一种是数组语法</p>
<p><strong>对象语法</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><code class="hljs javascript">props:&#123;<br>    <span class="hljs-attr">aaa</span>:&#123;<br>        <span class="hljs-attr">type</span>:类型,<br>        <span class="hljs-attr">required</span>:boolean,<br>        <span class="hljs-function"><span class="hljs-title">default</span>(<span class="hljs-params"></span>)</span>&#123;<br>            <span class="hljs-keyword">return</span> 默认值<br>        &#125;<br>    &#125;，<br>    <span class="hljs-attr">bbb</span>:&#123;<br>        <span class="hljs-attr">type</span>:类型....<br>    &#125;<br>&#125;<br></code></pre></td></tr></table></figure>

<p><strong>数组语法</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs javascript">props:[<span class="hljs-string">&quot;aaa&quot;</span>,<span class="hljs-string">&quot;bbb&quot;</span>]<br></code></pre></td></tr></table></figure>

<p><strong>注意事项</strong></p>
<p>无论是对象语法还是数组语法，在使用属性的的时候，都要注意驼峰命令的情况，如果属性非要使用驼峰命名请转义， 如<code>&lt;c :user-list=&quot;[&#39;a&#39;,&#39;b&#39;]&quot;&gt;&lt;/c&gt;</code>，则在在接收的时候就可以使用<code>props:[&quot;userList&quot;]</code></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;app&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">list-box</span> <span class="hljs-attr">:list-info</span>=<span class="hljs-string">&quot;stuList&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">list-box</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">hr</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">list-box</span> <span class="hljs-attr">:list-info</span>=<span class="hljs-string">&quot;teacherList&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">list-box</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;temp1&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;list-group&quot;</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">v-for</span>=<span class="hljs-string">&quot;(item,index) in listInfo&quot;</span> <span class="hljs-attr">:key</span>=<span class="hljs-string">&quot;index&quot;</span>&gt;</span><br>                &#123;&#123;item&#125;&#125;<br>            <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./js/vue.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    <span class="hljs-comment">// 数据要么在自身，要么从外边拿</span></span><br><span class="javascript">    <span class="hljs-keyword">let</span> listBox = &#123;</span><br><span class="javascript">        <span class="hljs-attr">template</span>: <span class="hljs-string">&quot;#temp1&quot;</span>,</span><br><span class="javascript">        <span class="hljs-attr">props</span>: &#123;</span><br><span class="javascript">            <span class="hljs-attr">listInfo</span>:&#123;</span><br><span class="javascript">                <span class="hljs-attr">type</span>:<span class="hljs-built_in">Array</span>,</span><br><span class="javascript">                <span class="hljs-attr">required</span>:<span class="hljs-literal">true</span></span><br><span class="javascript">            &#125;</span><br><span class="javascript">        &#125;</span><br><span class="javascript">    &#125;</span><br><span class="javascript">    <span class="hljs-keyword">new</span> Vue(&#123;</span><br><span class="javascript">        <span class="hljs-attr">el</span>: <span class="hljs-string">&quot;#app&quot;</span>,</span><br><span class="javascript">        <span class="hljs-attr">data</span>: &#123;</span><br><span class="javascript">            <span class="hljs-attr">stuList</span>: [<span class="hljs-string">&quot;季强&quot;</span>, <span class="hljs-string">&quot;陈欢欢&quot;</span>, <span class="hljs-string">&quot;喻金&quot;</span>, <span class="hljs-string">&quot;松明&quot;</span>],</span><br><span class="javascript">            <span class="hljs-attr">teacherList</span>: [<span class="hljs-string">&quot;桃子&quot;</span>, <span class="hljs-string">&quot;标哥&quot;</span>]</span><br><span class="javascript">        &#125;,</span><br><span class="javascript">        <span class="hljs-attr">components</span>: &#123;</span><br><span class="javascript">            listBox</span><br><span class="javascript">        &#125;</span><br><span class="javascript">    &#125;)</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<h3 id="六、组件的事件及方法"><a href="#六、组件的事件及方法" class="headerlink" title="六、组件的事件及方法"></a>六、组件的事件及方法</h3><p>之前已经给同学样讲过了，每个组件都是相互隔离的，如果要相互之间使用数据，则必须要进行传递，外部的数据传递到组件内部，这样就会形成一种关系叫父子关系，A使用了B，则我们就认为A是B的父级</p>
<img src="https://pic.imgdb.cn/item/618e18d02ab3f51d91d950df.png" srcset="/blog/img/loading.gif" lazyload alt="image-20211111163117394" style="zoom:70%;" />

<h4 id="1-父级组件调用子级组件的方法【第一种方式】"><a href="#1-父级组件调用子级组件的方法【第一种方式】" class="headerlink" title="1. 父级组件调用子级组件的方法【第一种方式】"></a>1. 父级组件调用子级组件的方法【第一种方式】</h4><p>在组件的部是两个特殊的属性的</p>
<ul>
<li><code>$parent</code>它指向自己的父级组件</li>
<li><code>$children</code>它包含当前组里面所使用的所有子组件</li>
</ul>
<p><strong>案例</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;app&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">&quot;outer1&quot;</span>&gt;</span>外部的按钮<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">one</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">one</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;temp1&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;box&quot;</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">&quot;aaa&quot;</span>&gt;</span>内部的按钮<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./js/vue.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    <span class="hljs-keyword">let</span> one = &#123;</span><br><span class="javascript">        <span class="hljs-attr">template</span>: <span class="hljs-string">&quot;#temp1&quot;</span>,</span><br><span class="javascript">        <span class="hljs-attr">methods</span>: &#123;</span><br><span class="javascript">            <span class="hljs-function"><span class="hljs-title">aaa</span>(<span class="hljs-params"></span>)</span> &#123;</span><br><span class="javascript">                alert(<span class="hljs-string">&quot;我是内部的按钮的事件&quot;</span>);</span><br><span class="javascript">                <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;我的父级&quot;</span>,<span class="hljs-built_in">this</span>.$parent);</span><br><span class="javascript">            &#125;</span><br><span class="javascript">        &#125;</span><br><span class="javascript">    &#125;</span><br><span class="javascript">    <span class="hljs-keyword">new</span> Vue(&#123;</span><br><span class="javascript">        <span class="hljs-attr">el</span>: <span class="hljs-string">&quot;#app&quot;</span>,</span><br><span class="javascript">        <span class="hljs-attr">methods</span>:&#123;</span><br><span class="javascript">            <span class="hljs-function"><span class="hljs-title">outer1</span>(<span class="hljs-params"></span>)</span>&#123;</span><br><span class="javascript">                alert(<span class="hljs-string">&quot;我是外部的东西&quot;</span>);</span><br><span class="javascript">                <span class="hljs-comment">//想在这里调用里面的aaa怎么办？</span></span><br><span class="javascript">                <span class="hljs-built_in">this</span>.$children[<span class="hljs-number">0</span>].aaa();</span><br><span class="javascript">            &#125;</span><br><span class="javascript">        &#125;,</span><br><span class="javascript">        <span class="hljs-attr">components</span>:&#123;</span><br><span class="javascript">            one</span><br><span class="javascript">        &#125;</span><br><span class="javascript">    &#125;)</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<blockquote>
<p>在上面的案例里面，我们可以通过<code>$children</code>来找到所使用了的所有子组件</p>
</blockquote>
<p>上面的代码里面是极其不严格的，因为它是通过<code>$children[索引]</code>来找到子组件的，如果子组件的索引不对，则一切白费</p>
<h4 id="2-父级组件调用子级组件的方法【第二种方式】"><a href="#2-父级组件调用子级组件的方法【第二种方式】" class="headerlink" title="2. 父级组件调用子级组件的方法【第二种方式】"></a>2. 父级组件调用子级组件的方法【第二种方式】</h4><p>子级组件其实也可以看成是一个<code>dom</code>，只是它是一个虚拟dom,而vue支持dom操作</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;app&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">&quot;outer1&quot;</span>&gt;</span>外部的按钮<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">one</span> <span class="hljs-attr">ref</span>=<span class="hljs-string">&quot;ttt&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">one</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">h2</span> <span class="hljs-attr">ref</span>=<span class="hljs-string">&quot;ggg&quot;</span>&gt;</span>这是一个真实的DOM<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;temp1&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;box&quot;</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">&quot;aaa&quot;</span>&gt;</span>内部的按钮<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./js/vue.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    <span class="hljs-keyword">let</span> one = &#123;</span><br><span class="javascript">        <span class="hljs-attr">template</span>: <span class="hljs-string">&quot;#temp1&quot;</span>,</span><br><span class="javascript">        <span class="hljs-attr">methods</span>: &#123;</span><br><span class="javascript">            <span class="hljs-function"><span class="hljs-title">aaa</span>(<span class="hljs-params"></span>)</span> &#123;</span><br><span class="javascript">                alert(<span class="hljs-string">&quot;我是内部的按钮的事件&quot;</span>);</span><br><span class="javascript">            &#125;</span><br><span class="javascript">        &#125;</span><br><span class="javascript">    &#125;</span><br><span class="javascript">    <span class="hljs-keyword">new</span> Vue(&#123;</span><br><span class="javascript">        <span class="hljs-attr">el</span>: <span class="hljs-string">&quot;#app&quot;</span>,</span><br><span class="javascript">        <span class="hljs-attr">methods</span>:&#123;</span><br><span class="javascript">            <span class="hljs-function"><span class="hljs-title">outer1</span>(<span class="hljs-params"></span>)</span>&#123;</span><br><span class="javascript">                alert(<span class="hljs-string">&quot;我是外部的东西&quot;</span>);</span><br><span class="javascript">                <span class="hljs-comment">//想在这里调用里面的aaa怎么办？</span></span><br><span class="javascript">                <span class="hljs-comment">//虚拟dom来操作</span></span><br><span class="javascript">                <span class="hljs-built_in">this</span>.$refs[<span class="hljs-string">&quot;ttt&quot;</span>].aaa();</span><br><span class="javascript">            &#125;</span><br><span class="javascript">        &#125;,</span><br><span class="javascript">        <span class="hljs-attr">components</span>:&#123;</span><br><span class="javascript">            one</span><br><span class="javascript">        &#125;</span><br><span class="javascript">    &#125;)</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<blockquote>
<p>在上面的代码里面，我们可以使用<code>ref</code>的方式来操作，</p>
</blockquote>
<h3 id="七、数据流的单向性"><a href="#七、数据流的单向性" class="headerlink" title="七、数据流的单向性"></a>七、数据流的单向性</h3><p>现有如下案例</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;app&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>我是&#123;&#123;userName&#125;&#125;，我有一个女儿叫&#123;&#123;daughterName&#125;&#125;<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">hr</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">aa</span> <span class="hljs-attr">:daughter-name</span>=<span class="hljs-string">&quot;daughterName&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">aa</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;temp1&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;box&quot;</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>我是女儿，我的名子叫：&#123;&#123;daughterName&#125;&#125;<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./js/vue.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    <span class="hljs-keyword">var</span> aa = &#123;</span><br><span class="javascript">        <span class="hljs-attr">template</span>: <span class="hljs-string">&quot;#temp1&quot;</span>,</span><br><span class="javascript">        <span class="hljs-attr">props</span>: [<span class="hljs-string">&quot;daughterName&quot;</span>]</span><br><span class="javascript">    &#125;</span><br><span class="javascript">    <span class="hljs-keyword">new</span> Vue(&#123;</span><br><span class="javascript">        <span class="hljs-attr">el</span>: <span class="hljs-string">&quot;#app&quot;</span>,</span><br><span class="javascript">        <span class="hljs-attr">data</span>: &#123;</span><br><span class="javascript">            <span class="hljs-attr">userName</span>: <span class="hljs-string">&quot;标哥哥&quot;</span>,</span><br><span class="javascript">            <span class="hljs-attr">daughterName</span>: <span class="hljs-string">&quot;杨柳彤&quot;</span></span><br><span class="javascript">        &#125;,</span><br><span class="javascript">        <span class="hljs-attr">components</span>: &#123;</span><br><span class="javascript">            aa</span><br><span class="javascript">        &#125;</span><br><span class="javascript">    &#125;)</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p>在上面的案例里面，我们向子级组件传递了一个数据<code>:daughter-name=&quot;daughterName&quot;</code>，子级组件拿到了以后就显示在了页面上面，所以数据是由父级组件<strong>传递</strong>子级组件</p>
<pre><code class=" mermaid">graph LR
A[父级组件]--&gt;|传递|B[子级组件]
</code></pre>

<p><img src="https://pic.imgdb.cn/item/618e18f32ab3f51d91d95f02.png" srcset="/blog/img/loading.gif" lazyload alt="image-20211111170204842"></p>
<p>现有2个问题，</p>
<ul>
<li>父级组件如果改变了<code>daughterName</code>这个数据，子级是否会改变？</li>
<li>子级能不能改变父级传递过来的<code>daughterName</code>？</li>
</ul>
<p><strong>结论一：父级改变，子级也会改变，具体看下面代码</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;app&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>我是&#123;&#123;userName&#125;&#125;，我有一个女儿叫&#123;&#123;daughterName&#125;&#125;<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span></span><br><span class="hljs-tag">            <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;background-color: red;&quot;</span></span><br><span class="hljs-tag">            @<span class="hljs-attr">click</span>=<span class="hljs-string">&quot;daughterName=&#x27;杨妞&#x27;&quot;</span>&gt;</span><br>        父级在改<br>    <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">hr</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">aa</span> <span class="hljs-attr">:daughter-name</span>=<span class="hljs-string">&quot;daughterName&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">aa</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br></code></pre></td></tr></table></figure>

<blockquote>
<p>在上面的代码里面，我们添加啊一个按钮，在这个按钮里绑定事件，改变当前vue里面的daughterName,结果发现子级组件也改了 </p>
</blockquote>
<p><strong>结论二：子级不能更改父级传递过来的数据，一旦更改就会报错，破坏了数据的统一，具体看下面代码</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;temp1&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;box&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>我是女儿，我的名子叫：&#123;&#123;daughterName&#125;&#125;<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">&quot;daughterName=&#x27;爱莎公主&#x27;&quot;</span>&gt;</span>子级要改变名子<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span><br></code></pre></td></tr></table></figure>

<blockquote>
<p>在组件内部的模板里面，改了外部传递过来的数据，则会报错</p>
</blockquote>
<p>在上面的两个结论里面，我们可以到这就是数据流的单向性，只能由父级到子级，不能由子级到父级</p>
<h3 id="八、破坏数据流单向性"><a href="#八、破坏数据流单向性" class="headerlink" title="八、破坏数据流单向性"></a>八、破坏数据流单向性</h3><p>正常情况下，我们是不需要破坏数据流的单向性的，但是如果某些特殊场景需要我们去改变，这个时候也可以使用下面的两种方式</p>
<h4 id="1-利用对象的堆栈原理"><a href="#1-利用对象的堆栈原理" class="headerlink" title="1. 利用对象的堆栈原理"></a>1. 利用对象的堆栈原理</h4><p>vue在进行组件传值的的时候使用的是浅拷贝规则 ，所以如果我们传递的是一个基本数据类型，数据在传递以后是互不影响 的，如果要让两个数据之间有相互的关系，可以使用对象来完成，如下</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;app&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>我是&#123;&#123;userName&#125;&#125;，我有一个女儿叫&#123;&#123;obj.daughterName&#125;&#125;<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span></span><br><span class="hljs-tag">            <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;background-color: red;&quot;</span></span><br><span class="hljs-tag">            @<span class="hljs-attr">click</span>=<span class="hljs-string">&quot;obj.daughterName = &#x27;杨妞&#x27;&quot;</span>&gt;</span><br>            父级在改<br>        <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">hr</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">aa</span> <span class="hljs-attr">:bbb</span>=<span class="hljs-string">&quot;obj&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">aa</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;temp1&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;box&quot;</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>我是女儿，我的名子叫：&#123;&#123;bbb.daughterName&#125;&#125;<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span></span><br><span class="hljs-tag">                @<span class="hljs-attr">click</span>=<span class="hljs-string">&quot;bbb.daughterName=&#x27;杨爱莎公主&#x27;&quot;</span>&gt;</span><br>                子级要改变名子<br>            <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./js/vue.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    <span class="hljs-keyword">var</span> aa = &#123;</span><br><span class="javascript">        <span class="hljs-attr">template</span>: <span class="hljs-string">&quot;#temp1&quot;</span>,</span><br><span class="javascript">        <span class="hljs-attr">props</span>: [<span class="hljs-string">&quot;bbb&quot;</span>]</span><br><span class="javascript">    &#125;</span><br><span class="javascript">    <span class="hljs-keyword">new</span> Vue(&#123;</span><br><span class="javascript">        <span class="hljs-attr">el</span>: <span class="hljs-string">&quot;#app&quot;</span>,</span><br><span class="javascript">        <span class="hljs-attr">data</span>: &#123;</span><br><span class="javascript">            <span class="hljs-attr">userName</span>: <span class="hljs-string">&quot;标哥哥&quot;</span>,</span><br><span class="javascript">            <span class="hljs-attr">obj</span>: &#123;</span><br><span class="javascript">                <span class="hljs-attr">daughterName</span>: <span class="hljs-string">&quot;杨柳彤&quot;</span></span><br><span class="javascript">            &#125;</span><br><span class="javascript">        &#125;,</span><br><span class="javascript">        <span class="hljs-attr">components</span>: &#123;</span><br><span class="javascript">            aa</span><br><span class="javascript">        &#125;</span><br><span class="javascript">    &#125;)</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p><img src="https://pic.imgdb.cn/item/618e19062ab3f51d91d9670e.png" srcset="/blog/img/loading.gif" lazyload alt="image-20211111173443938"></p>
<h4 id="2-通过vue官方提供的方法–自定义事件"><a href="#2-通过vue官方提供的方法–自定义事件" class="headerlink" title="2. 通过vue官方提供的方法–自定义事件"></a>2. 通过vue官方提供的方法–自定义事件</h4><p><img src="https://pic.imgdb.cn/item/618e592c2ab3f51d91f51be9.png" srcset="/blog/img/loading.gif" lazyload alt="image-20211112090647471"></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;app&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>我有一个女儿，她的名子叫&#123;&#123;myDaughterName&#125;&#125;<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">one</span> <span class="hljs-attr">:tname</span>=<span class="hljs-string">&quot;myDaughterName&quot;</span></span><br><span class="hljs-tag">            @<span class="hljs-attr">dadchangemyname</span>=<span class="hljs-string">&quot;changeDaughterName&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">one</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;temp1&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;box&quot;</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>我是女儿，我的名子是&#123;&#123;tname&#125;&#125;<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">&quot;childChangeName&quot;</span>&gt;</span>子级改变姓名<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./js/vue.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    <span class="hljs-keyword">let</span> one = &#123;</span><br><span class="javascript">        <span class="hljs-attr">template</span>: <span class="hljs-string">&quot;#temp1&quot;</span>,</span><br><span class="javascript">        <span class="hljs-attr">props</span>: [<span class="hljs-string">&quot;tname&quot;</span>],</span><br><span class="javascript">        <span class="hljs-attr">methods</span>: &#123;</span><br><span class="javascript">            <span class="hljs-function"><span class="hljs-title">childChangeName</span>(<span class="hljs-params"></span>)</span> &#123;</span><br><span class="javascript">                <span class="hljs-comment">//触发一个自定义事件</span></span><br><span class="javascript">                <span class="hljs-built_in">this</span>.$emit(<span class="hljs-string">&quot;dadchangemyname&quot;</span>,<span class="hljs-string">&quot;杨爱莎公主&quot;</span>)</span><br><span class="javascript">            &#125;</span><br><span class="javascript">        &#125;</span><br><span class="javascript">    &#125;</span><br><span class="javascript">    <span class="hljs-keyword">new</span> Vue(&#123;</span><br><span class="javascript">        <span class="hljs-attr">el</span>: <span class="hljs-string">&quot;#app&quot;</span>,</span><br><span class="javascript">        <span class="hljs-attr">data</span>: &#123;</span><br><span class="javascript">            <span class="hljs-attr">myDaughterName</span>: <span class="hljs-string">&quot;杨柳彤&quot;</span></span><br><span class="javascript">        &#125;,</span><br><span class="javascript">        <span class="hljs-attr">methods</span>: &#123;</span><br><span class="javascript">            <span class="hljs-function"><span class="hljs-title">changeDaughterName</span>(<span class="hljs-params">newName</span>)</span> &#123;</span><br><span class="javascript">                <span class="hljs-built_in">this</span>.myDaughterName = newName;</span><br><span class="javascript">            &#125;</span><br><span class="javascript">        &#125;,</span><br><span class="javascript">        <span class="hljs-attr">components</span>: &#123;</span><br><span class="javascript">            one</span><br><span class="javascript">        &#125;</span><br><span class="javascript">    &#125;)</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<blockquote>
<p>在组件的内部触发了一个自定义的事件，然后这个自定义的事件上面通过<code>this.$emit(&quot;事件名&quot;,参数)</code>，在调用这个组件时候，我们就可以使用<code>@自定义事件去完成</code></p>
</blockquote>
<h3 id=""><a href="#" class="headerlink" title=""></a></h3><h3 id="九、自定义事件"><a href="#九、自定义事件" class="headerlink" title="九、自定义事件"></a>九、自定义事件</h3><p>在上面的案例当中，我们去破解数据流的单向的时候使用了自定义事件，其实在<code>vue</code>开发里在，自定义事件是非常频繁的。现在我们把刚刚自定义的流程先梳理一下</p>
<pre><code class=" mermaid">graph LR
A[&quot;子级$emit()自定义事件&quot;]--&gt;B[&quot;父级监控这个@自定义事件&quot;]
B--&gt;C[父级调用方法执行]
</code></pre>

<p>现在我们通过一个最基本的案例来执行操作</p>
<p><img src="https://pic.imgdb.cn/item/618e59d62ab3f51d91f55d7c.png" srcset="/blog/img/loading.gif" lazyload alt="image-20211112092022283"></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-meta-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;zh&quot;</span>&gt;</span><br><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">http-equiv</span>=<span class="hljs-string">&quot;X-UA-Compatible&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;IE=edge&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;viewport&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>自定义事件<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="css"></span><br><span class="css">        <span class="hljs-selector-class">.btn</span> &#123;</span><br><span class="css">            <span class="hljs-attribute">min-width</span>: <span class="hljs-number">120px</span>;</span><br><span class="css">            <span class="hljs-attribute">height</span>: <span class="hljs-number">35px</span>;</span><br><span class="css">            <span class="hljs-attribute">border</span>: none;</span><br><span class="css">            <span class="hljs-attribute">outline</span>: none;</span><br><span class="css">            <span class="hljs-attribute">background-color</span>: lightseagreen;</span><br><span class="css">            <span class="hljs-attribute">cursor</span>: pointer;</span><br><span class="css">            <span class="hljs-attribute">color</span>: white;</span><br><span class="css">        &#125;</span><br><span class="css"></span><br><span class="css">        <span class="hljs-selector-class">.btn</span><span class="hljs-selector-pseudo">:active</span> &#123;</span><br><span class="css">            <span class="hljs-attribute">box-shadow</span>: <span class="hljs-number">0px</span> <span class="hljs-number">0px</span> <span class="hljs-number">10px</span> <span class="hljs-number">5px</span> lightgray;</span><br><span class="css">        &#125;</span><br><span class="css">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;app&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">my-button</span> <span class="hljs-attr">text</span>=<span class="hljs-string">&quot;登陆&quot;</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">&quot;aaa&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">my-button</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;temp1&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;btn-box&quot;</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;btn&quot;</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">&quot;innerClick($event)&quot;</span>&gt;</span>&#123;&#123;text&#125;&#125;<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span><br><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./js/vue.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    <span class="hljs-keyword">let</span> myButton = &#123;</span><br><span class="javascript">        <span class="hljs-attr">template</span>: <span class="hljs-string">&quot;#temp1&quot;</span>,</span><br><span class="javascript">        <span class="hljs-attr">props</span>: &#123;</span><br><span class="javascript">            <span class="hljs-attr">text</span>: &#123;</span><br><span class="javascript">                <span class="hljs-attr">type</span>: <span class="hljs-built_in">String</span>,</span><br><span class="javascript">                <span class="hljs-attr">default</span>: <span class="hljs-function">() =&gt;</span> <span class="hljs-string">&quot;按钮&quot;</span></span><br><span class="javascript">            &#125;</span><br><span class="javascript">        &#125;,</span><br><span class="javascript">        <span class="hljs-attr">methods</span>:&#123;</span><br><span class="javascript">            <span class="hljs-function"><span class="hljs-title">innerClick</span>(<span class="hljs-params">event</span>)</span>&#123;</span><br><span class="javascript">                <span class="hljs-built_in">this</span>.$emit(<span class="hljs-string">&quot;click&quot;</span>,event);</span><br><span class="javascript">            &#125;</span><br><span class="javascript">        &#125;</span><br><span class="javascript">    &#125;</span><br><span class="javascript">    <span class="hljs-keyword">new</span> Vue(&#123;</span><br><span class="javascript">        <span class="hljs-attr">el</span>: <span class="hljs-string">&quot;#app&quot;</span>,</span><br><span class="javascript">        <span class="hljs-attr">methods</span>: &#123;</span><br><span class="javascript">            <span class="hljs-function"><span class="hljs-title">aaa</span>(<span class="hljs-params"></span>)</span> &#123;</span><br><span class="javascript">                alert(<span class="hljs-string">&quot;hello world&quot;</span>);</span><br><span class="javascript">                <span class="hljs-built_in">console</span>.log(event);</span><br><span class="javascript">            &#125;</span><br><span class="javascript">        &#125;,</span><br><span class="javascript">        <span class="hljs-attr">components</span>: &#123;</span><br><span class="javascript">            myButton</span><br><span class="javascript">        &#125;</span><br><span class="javascript">    &#125;)</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>

<h3 id="十、组件的插槽"><a href="#十、组件的插槽" class="headerlink" title="十、组件的插槽"></a>十、组件的插槽</h3><h4 id="1-普通插槽"><a href="#1-普通插槽" class="headerlink" title="1. 普通插槽"></a>1. 普通插槽</h4><blockquote>
<p>也叫default默认插槽</p>
</blockquote>
<p>组件中的插槽可以理解成我们之前的电脑里同的主板，这个主板可以确定大多数的功能，对于不确定的东西则预留一个插槽，方便后期插入东西进去</p>
<p>这个思维方式与组件很相似，我在封装组件的时候，其实也可以一些公共的确定的HTML封装起来，对于那些不确定的东西我们则给可以给它预留一下插槽</p>
<img src="https://pic.imgdb.cn/item/618e59f22ab3f51d91f5697e.png" srcset="/blog/img/loading.gif" lazyload alt="image-20211112093955970" style="zoom:50%;" />

<p>如果想在件组件的开始标签与结束标签中插入内容，则在封装组件进修必须预留插槽</p>
<p>如果要想在组件内预留插槽，则要使用<code>&lt;slot&gt;</code>去完成，如下代码所示</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;app&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">one</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span>&gt;</span>我是按钮<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span>&gt;</span>我是按钮<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span>&gt;</span>我是按钮<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">one</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;temp1&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;box&quot;</span>&gt;</span><br>            <span class="hljs-comment">&lt;!-- 现在在这里预留了一个插口 --&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">slot</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">slot</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>我是一个组件-------哈哈哈<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./js/vue.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    <span class="hljs-keyword">let</span> one = &#123;</span><br><span class="javascript">        <span class="hljs-attr">template</span>:<span class="hljs-string">&quot;#temp1&quot;</span></span><br><span class="javascript">    &#125;</span><br><span class="javascript">    <span class="hljs-keyword">new</span> Vue(&#123;</span><br><span class="javascript">        <span class="hljs-attr">el</span>:<span class="hljs-string">&quot;#app&quot;</span>,</span><br><span class="javascript">        <span class="hljs-attr">components</span>:&#123;</span><br><span class="javascript">            one</span><br><span class="javascript">        &#125;</span><br><span class="javascript">    &#125;)</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<blockquote>
<p>在上面的代码里面，<code>one</code>的虚拟dom里面插入了3个button标签，这3个标签最终全部插入到了<code>slot</code>的位置 </p>
</blockquote>
<p><strong>效果图：一个slot多次插入</strong></p>
<p><img src="https://pic.imgdb.cn/item/618e5a072ab3f51d91f571c0.png" srcset="/blog/img/loading.gif" lazyload alt="image-20211112094527407"></p>
<p>同时还有另一种情况，一个插入点插入在多个插槽<code>slot</code>里面，如下代码所示</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;app&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">one</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span>&gt;</span>我是按钮<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">one</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;temp1&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;box&quot;</span>&gt;</span><br>        <span class="hljs-comment">&lt;!-- 现在在这里预留了一个插口 --&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">slot</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">slot</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>我是一个组件-------哈哈哈<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">slot</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">slot</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span><br></code></pre></td></tr></table></figure>

<blockquote>
<p>在上面的代码里面，我们可以看到，一个<code>button</code>标签插入到了多个<code>slot</code>里面</p>
</blockquote>
<p><strong>效果图：一个插入放在多个slot里面</strong></p>
<p><img src="https://pic.imgdb.cn/item/618e5a162ab3f51d91f578af.png" srcset="/blog/img/loading.gif" lazyload alt="image-20211112094754642"></p>
<p>在刚刚的代码里面，我们通过<code>slot</code>在组件内部定义了插槽，后期就可以直接 插入，其实这些slot都叫默认插件，它的完整写法应该是下面的写法</p>
<p><img src="https://pic.imgdb.cn/item/618e5a262ab3f51d91f57fc3.png" srcset="/blog/img/loading.gif" lazyload alt="image-20211112095017323"></p>
<p>默认情况所有的<code>slot</code>都必须指定一个name的，如果不指定则默认就是<code>default</code></p>
<h4 id="2-具名插槽"><a href="#2-具名插槽" class="headerlink" title="2.具名插槽"></a>2.具名插槽</h4><p>在上面的默认插槽里面，所有的slot如果在不指定name的情况都是默认插槽default，但是这个name是可以设置为其它的值的，如果设置为其它的值 ，我们就把这个插槽叫具名插槽</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><code class="hljs html"> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;app&quot;</span>&gt;</span><br>     <span class="hljs-tag">&lt;<span class="hljs-name">one</span>&gt;</span><br>         <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>我是默认的<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br>         <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&quot;footer&quot;</span>&gt;</span>我是另一个插入的<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>         <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;#&quot;</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&quot;inner&quot;</span>&gt;</span>我是第三个插入的<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><br>     <span class="hljs-tag">&lt;/<span class="hljs-name">one</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;temp1&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;box&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">slot</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;footer&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">slot</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">slot</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">slot</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>我是一个组件-------哈哈哈<br>            <span class="hljs-tag">&lt;<span class="hljs-name">slot</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;inner&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">slot</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">slot</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;footer&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">slot</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p><img src="https://pic.imgdb.cn/item/618e5a442ab3f51d91f58cd7.png" srcset="/blog/img/loading.gif" lazyload alt="image-20211112100210564"></p>
<blockquote>
<p>在上面的代码里面，我们可以看到插槽是可以指定具体的名子的，仍然可以实现一对多，多对一</p>
<p>当插槽有了名子以后，我们在插入的时候就可以指定插入在某一个插槽里面</p>
<ol>
<li>我们在组件里面定义插槽的时候使用了  标签，并且在这个<code>slot</code>标签上面定义了 name 这 个属性，这就是具名插槽</li>
<li>在调用这个组件的时候，可以向指定的插槽位置插入内容，只需要在这个元素上面添加 <code>slot=&quot;名称&quot;</code> 即可</li>
<li>具名插槽也是可以多次使用的，所以在上面的代码当中 <code>name=&quot;footer&quot; </code>这个插槽就出现2 次</li>
</ol>
</blockquote>
<p><strong>案例：现有下面的几种情况，同学想一下如果定义组件</strong></p>
<p><img src="https://pic.imgdb.cn/item/618e5a782ab3f51d91f5a06b.png" srcset="/blog/img/loading.gif" lazyload alt="image-20211112100529466"></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-meta-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;zh&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">http-equiv</span>=<span class="hljs-string">&quot;X-UA-Compatible&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;IE=edge&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;viewport&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>插槽的案例<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">&quot;stylesheet&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;https://at.alicdn.com/t/font_2711195_ar2lbyi6qmj.css&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="css"></span><br><span class="css">        *&#123;</span><br><span class="css">            <span class="hljs-attribute">margin</span>: <span class="hljs-number">0</span>;</span><br><span class="css">            <span class="hljs-attribute">padding</span>: <span class="hljs-number">0</span>;</span><br><span class="css">            <span class="hljs-attribute">list-style-type</span>: none;</span><br><span class="css">        &#125;</span><br><span class="css">        <span class="hljs-selector-class">.page-title</span>&#123;</span><br><span class="css">            <span class="hljs-attribute">height</span>: <span class="hljs-number">45px</span>;</span><br><span class="css">            <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#008de1</span>;</span><br><span class="css">            <span class="hljs-attribute">font-weight</span>: bold;</span><br><span class="css">            <span class="hljs-attribute">display</span>: flex;</span><br><span class="css">            <span class="hljs-attribute">justify-content</span>: center;</span><br><span class="css">            <span class="hljs-attribute">align-items</span>: center;</span><br><span class="css">            <span class="hljs-attribute">color</span>: white;</span><br><span class="css">            <span class="hljs-attribute">position</span>: relative;</span><br><span class="css">        &#125;</span><br><span class="css">        <span class="hljs-selector-class">.left-back</span>&#123;</span><br><span class="css">            <span class="hljs-attribute">position</span>: absolute;</span><br><span class="css">            <span class="hljs-attribute">left</span>: <span class="hljs-number">10px</span>;</span><br><span class="css">        &#125;</span><br><span class="css">        <span class="hljs-selector-class">.right-menu</span>&#123;</span><br><span class="css">            <span class="hljs-attribute">position</span>: absolute;</span><br><span class="css">            <span class="hljs-attribute">right</span>: <span class="hljs-number">10px</span>;</span><br><span class="css">        &#125;</span><br><span class="css">        <span class="hljs-selector-class">.right-menu</span>&gt;<span class="hljs-selector-class">.iconfont</span>&#123;</span><br><span class="css">            <span class="hljs-attribute">margin-left</span>: <span class="hljs-number">5px</span>;</span><br><span class="css">        &#125;</span><br><span class="css">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;app&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">app-title</span> <span class="hljs-attr">:show-back</span>=<span class="hljs-string">&quot;true&quot;</span> @<span class="hljs-attr">back</span>=<span class="hljs-string">&quot;bbb&quot;</span>&gt;</span><br>            软帝点餐<br>            <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&quot;right-menu&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;iconfont icon-home-fill&quot;</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">&quot;aaa&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">app-title</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;temp1&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;page-title&quot;</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;left-back&quot;</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">&quot;backClick($event)&quot;</span> <span class="hljs-attr">v-if</span>=<span class="hljs-string">&quot;showBack&quot;</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;iconfont icon-fanhui&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><br>                返回<br>            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">slot</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">slot</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;right-menu&quot;</span>&gt;</span><br>               <span class="hljs-tag">&lt;<span class="hljs-name">slot</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;right-menu&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">slot</span>&gt;</span><br>            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./js/vue.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    <span class="hljs-keyword">let</span> appTitle = &#123;</span><br><span class="javascript">        <span class="hljs-attr">template</span>:<span class="hljs-string">&quot;#temp1&quot;</span>,</span><br><span class="javascript">        <span class="hljs-attr">props</span>:&#123;</span><br><span class="javascript">            <span class="hljs-attr">showBack</span>:&#123;</span><br><span class="javascript">                <span class="hljs-attr">type</span>:<span class="hljs-built_in">Boolean</span>,</span><br><span class="javascript">                <span class="hljs-attr">default</span>:<span class="hljs-function">()=&gt;</span><span class="hljs-literal">false</span></span><br><span class="javascript">            &#125;</span><br><span class="javascript">        &#125;,</span><br><span class="javascript">        <span class="hljs-attr">methods</span>:&#123;</span><br><span class="javascript">            <span class="hljs-function"><span class="hljs-title">backClick</span>(<span class="hljs-params">event</span>)</span>&#123;</span><br><span class="javascript">                <span class="hljs-built_in">this</span>.$emit(<span class="hljs-string">&quot;back&quot;</span>,event);</span><br><span class="javascript">            &#125;</span><br><span class="javascript">        &#125;</span><br><span class="javascript">    &#125;</span><br><span class="javascript">    </span><br><span class="javascript">    <span class="hljs-keyword">new</span> Vue(&#123;</span><br><span class="javascript">        <span class="hljs-attr">el</span>:<span class="hljs-string">&quot;#app&quot;</span>,</span><br><span class="javascript">        <span class="hljs-attr">components</span>:&#123;</span><br><span class="javascript">            appTitle</span><br><span class="javascript">        &#125;,</span><br><span class="javascript">        <span class="hljs-attr">methods</span>:&#123;</span><br><span class="javascript">            <span class="hljs-function"><span class="hljs-title">aaa</span>(<span class="hljs-params"></span>)</span>&#123;</span><br><span class="javascript">                alert(<span class="hljs-string">&quot;我是aaa的方法&quot;</span>)</span><br><span class="javascript">            &#125;,</span><br><span class="javascript">            <span class="hljs-function"><span class="hljs-title">bbb</span>(<span class="hljs-params">event</span>)</span>&#123;</span><br><span class="javascript">                alert(<span class="hljs-string">&quot;我是内部发射到外边的返回啊&quot;</span>)</span><br><span class="javascript">            &#125;</span><br><span class="javascript">        &#125;</span><br><span class="javascript">    &#125;)</span><br><span class="javascript"></span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>

<h4 id="3-作用域插槽"><a href="#3-作用域插槽" class="headerlink" title="3. 作用域插槽"></a>3. 作用域插槽</h4><p>作用域插槽是一个比较常见的现象，在工作当中使用得非常频繁，现在来看一下场景 </p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;app&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">one</span>&gt;</span><br>        	<span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>我想拿到组件内部的userName<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">one</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;temp1&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;box&quot;</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>这是一个组件<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">slot</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">slot</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./js/vue.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    <span class="hljs-keyword">let</span> one = &#123;</span><br><span class="javascript">        <span class="hljs-attr">template</span>: <span class="hljs-string">&quot;#temp1&quot;</span>,</span><br><span class="javascript">        <span class="hljs-function"><span class="hljs-title">data</span>(<span class="hljs-params"></span>)</span>&#123;</span><br><span class="javascript">            <span class="hljs-keyword">return</span>  &#123;</span><br><span class="javascript">                <span class="hljs-attr">userName</span>:<span class="hljs-string">&quot;小珊子&quot;</span></span><br><span class="javascript">            &#125;</span><br><span class="javascript">        &#125;</span><br><span class="javascript">    &#125;</span><br><span class="javascript">    <span class="hljs-keyword">new</span> Vue(&#123;</span><br><span class="javascript">        <span class="hljs-attr">el</span>: <span class="hljs-string">&quot;#app&quot;</span>,</span><br><span class="javascript">        <span class="hljs-attr">components</span>: &#123;</span><br><span class="javascript">            one</span><br><span class="javascript">        &#125;</span><br><span class="javascript">    &#125;)</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p>我们以前的时候一直都是外部的数据传递到组件内部，如果把组件内部的数据传递到外边去呢，例如上面在上面的代码当中，如果把<code>userName</code>传递到外边去</p>
<p><strong>组件内部的数据如果要传递到组件外部去，其实原理是一样的，仍然使用自定义的属性</strong></p>
<p><img src="https://pic.imgdb.cn/item/618e5a942ab3f51d91f5ae6f.png" srcset="/blog/img/loading.gif" lazyload alt="image-20211112112912241"></p>
<p>在上面的案例里面，我们看到了，我们通过<code>slot-scope</code>拿到了插槽里在作用域，然后拿到了插槽上面所有的值，最后直接 使用</p>
<p>在上在贩案例里面，我们还看到了，这个些插槽都是默认的<code>default</code>的插槽，如果是具名插槽呢？</p>
<p><img src="https://pic.imgdb.cn/item/618e5aa52ab3f51d91f5b46c.png" srcset="/blog/img/loading.gif" lazyload alt="image-20211112113534455"></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;app&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">one</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&quot;default&quot;</span> <span class="hljs-attr">slot-scope</span>=<span class="hljs-string">&quot;scope&quot;</span>&gt;</span><br>                用户名：&#123;&#123;scope.userName&#125;&#125;<br>            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">hr</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&quot;footer&quot;</span> <span class="hljs-attr">slot-scope</span>=<span class="hljs-string">&quot;scope&quot;</span>&gt;</span><br>                年龄：&#123;&#123;scope.age&#125;&#125;<br>            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">one</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;temp1&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;box&quot;</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">slot</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;default&quot;</span> <span class="hljs-attr">:user-name</span>=<span class="hljs-string">&quot;userName&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">slot</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>这是一个组件<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span><br>           <span class="hljs-tag">&lt;<span class="hljs-name">slot</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;footer&quot;</span> <span class="hljs-attr">:age</span>=<span class="hljs-string">&quot;18&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">slot</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./js/vue.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    <span class="hljs-keyword">let</span> one = &#123;</span><br><span class="javascript">        <span class="hljs-attr">template</span>: <span class="hljs-string">&quot;#temp1&quot;</span>,</span><br><span class="javascript">        <span class="hljs-function"><span class="hljs-title">data</span>(<span class="hljs-params"></span>)</span>&#123;</span><br><span class="javascript">            <span class="hljs-keyword">return</span>  &#123;</span><br><span class="javascript">                <span class="hljs-attr">userName</span>:<span class="hljs-string">&quot;小珊子&quot;</span></span><br><span class="javascript">            &#125;</span><br><span class="javascript">        &#125;</span><br><span class="javascript">    &#125;</span><br><span class="javascript">    <span class="hljs-keyword">new</span> Vue(&#123;</span><br><span class="javascript">        <span class="hljs-attr">el</span>: <span class="hljs-string">&quot;#app&quot;</span>,</span><br><span class="javascript">        <span class="hljs-attr">components</span>: &#123;</span><br><span class="javascript">            one</span><br><span class="javascript">        &#125;</span><br><span class="javascript">    &#125;)</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<blockquote>
<p>代码分析：</p>
<ol>
<li>在<code>slot=&quot;default&quot;</code>的插槽里面，我们的数据是直接向外部传送了<code>userName</code>，同时要注意<code>default</code>是默认的插槽，可以不指定名子也行</li>
<li>在<code>slot=&quot;footer&quot;</code>的插槽里面，我们向外传递数据<code>:age=&#39;18&#39;</code></li>
<li>在调用这个组件的时候，我们可以通过<code>slot=&quot;default&quot;</code>或<code>slot=&quot;footer&quot;</code>来决定到底插入在什么地方，同时还可以使用<code>slot-scope</code>拿到这个插槽的作用域（通俗一点讲就是拿到这个插槽向外部传递的数据）</li>
<li>主要作用的还是两个属性<ul>
<li><code>slot</code>决定到底插入在什么位置 </li>
<li><code>slot-scope</code>拿到作用域（拿到插槽上面的数据）</li>
</ul>
</li>
</ol>
</blockquote>
<p><strong>上面的<code>slot-scope</code>是过时的写法，现在新的vue2.6.1开始就使用新的语法叫<code>v-slot</code>了</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs html"> <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;temp1&quot;</span>&gt;</span><br>     <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;box&quot;</span>&gt;</span><br>         <span class="hljs-tag">&lt;<span class="hljs-name">slot</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;default&quot;</span> <span class="hljs-attr">:user-name</span>=<span class="hljs-string">&quot;userName&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">slot</span>&gt;</span><br>         <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>这是一个组件<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span><br>         <span class="hljs-tag">&lt;<span class="hljs-name">slot</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;footer&quot;</span> <span class="hljs-attr">:age</span>=<span class="hljs-string">&quot;18&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">slot</span>&gt;</span><br>     <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p><span style="color:red;font-weight:bold">旧版本的语法</span></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">one</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&quot;default&quot;</span> <span class="hljs-attr">slot-scope</span>=<span class="hljs-string">&quot;scope&quot;</span>&gt;</span><br>        用户名：&#123;&#123;scope.userName&#125;&#125;<br>    <span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&quot;footer&quot;</span> <span class="hljs-attr">slot-scope</span>=<span class="hljs-string">&quot;scope&quot;</span>&gt;</span><br>        年龄：&#123;&#123;scope.age&#125;&#125;<br>    <span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">one</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p><span style="color:green;font-weight:bold">新版本的语法</span></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">one</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">v-slot:default</span>=<span class="hljs-string">&quot;scope&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span><br>            用户名：&#123;&#123;scope.userName&#125;&#125;<br>        <span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">v-slot:footer</span>=<span class="hljs-string">&quot;scope&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span><br>            年龄：&#123;&#123;scope.age&#125;&#125;<br>        <span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">one</span>&gt;</span><br></code></pre></td></tr></table></figure>

<blockquote>
<p>代码分析：</p>
<ol>
<li><code>v-slot</code>就是去拿作用域，如果后面不跟具体的名称就是拿<code>default</code>，所以<code>v-slot:default</code>就是<code>v-slot</code></li>
<li>如果要拿作用域则<code>v-slot:插槽名称=&quot;scope&quot;</code></li>
<li>新版本里面只能通过<code>&lt;template&gt;</code>要都会来插入，不能通过其它的标签</li>
</ol>
</blockquote>
<p><span style="color:orange;font-weight:bold;font-size:16px;text-decoration:underline wavy blue">最新版本的语法</span></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs html"> <span class="hljs-tag">&lt;<span class="hljs-name">one</span>&gt;</span><br>     <span class="hljs-tag">&lt;<span class="hljs-name">template</span> #<span class="hljs-attr">default</span>=<span class="hljs-string">&quot;scope&quot;</span>&gt;</span><br>         <span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>我在默认的位置插入:&#123;&#123;scope.userName&#125;&#125;<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span><br>     <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span><br>     <span class="hljs-tag">&lt;<span class="hljs-name">template</span> #<span class="hljs-attr">footer</span>=<span class="hljs-string">&quot;scope&quot;</span>&gt;</span><br>         <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>我在footer的位置插入:&#123;&#123;scope.age&#125;&#125;<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br>     <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">one</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p>我们推荐同学们使用第一种和第三种，但是还是要了解第二种</p>
<p><strong>案例</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;app&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">one</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">template</span> #<span class="hljs-attr">default</span>=<span class="hljs-string">&quot;&#123;age,sex,userName&#125;&quot;</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>插入<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>&#123;&#123;age&#125;&#125;<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>&#123;&#123;userName&#125;&#125;<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>&#123;&#123;sex&#125;&#125;<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">one</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;temp1&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;box&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>这是一个组件<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">slot</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;default&quot;</span> <span class="hljs-attr">:age</span>=<span class="hljs-string">&quot;18&quot;</span> <span class="hljs-attr">:user-name</span>=<span class="hljs-string">&quot;userName&quot;</span> <span class="hljs-attr">sex</span>=<span class="hljs-string">&quot;女&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">slot</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p>在新版本的语法里面，作用域是可以直接解构的</p>
<h3 id="十一、vue及组件生命周期"><a href="#十一、vue及组件生命周期" class="headerlink" title="十一、vue及组件生命周期"></a>十一、vue及组件生命周期</h3><p>我们都知道如果要使用vue ，则在最开始的时候就要去<code>new</code>一个Vue，那么在创建这个vue的对象过程当中，到底经过了哪些过程呢，这个我们就必须要掌握vue的生命周期</p>
<p>生命周期（ lifeCycle）：指从出生到死亡的过程，vue的生命周期指的是从创建到销毁的过程</p>
<p>在vue的内部，它的生命其实是有四个阶段</p>
<pre><code class=" mermaid">graph LR
A[创建create]--&gt;B[挂载mount]--&gt;C[更新update]--&gt;D[销毁]
</code></pre>

<p>通俗一点来讲，我们把vue的生命周期分为4个阶段，8个过程，它们在不同的状态有不同的操作，在每个阶段都会执行一个特殊的函数，这个函数叫<strong>钩子函数</strong></p>
<p><strong>钩子函数</strong>：所谓的钩子函数指的是vue在不同的周期情况下自己调用的函数</p>
<ol>
<li><code>beforeCreate</code>vue创建之前</li>
<li><code>created</code>vue创建以后</li>
<li><code>beforeMount</code>vue挂载之前【vue接管页面之前】</li>
<li><code>mounte</code>vue挂载之后【vue接管页面之后】</li>
<li><code>beforeUpdate</code>vue内部更新之前</li>
<li><code>updated</code>vue内部更新以后</li>
<li><code>beforeDestory</code>vue销毁之前</li>
<li><code>destoryed</code>vue销毁之后</li>
</ol>
<p>vue在一个是8个状态，对应了8个钩子函数，在不同钩子函数里面要执行不同的操作</p>
<table>
<thead>
<tr>
<th>周期名称</th>
<th>data属性</th>
<th>computed属性</th>
<th>methods方法</th>
<th>$refs操作</th>
</tr>
</thead>
<tbody><tr>
<td><code>beforeCreate()</code></td>
<td>否</td>
<td>否</td>
<td>否</td>
<td>否</td>
</tr>
<tr>
<td><code>created()</code></td>
<td>是</td>
<td>是</td>
<td>是</td>
<td>否</td>
</tr>
<tr>
<td><code>beforeMount()</code></td>
<td>是</td>
<td>是</td>
<td>是</td>
<td>否</td>
</tr>
<tr>
<td><code>mounted()</code></td>
<td>是</td>
<td>是</td>
<td>是</td>
<td>是</td>
</tr>
</tbody></table>
<p>在vue的组件内部也是这8个生命周期钩子函数，之前就给同学们讲过，组件就是一个小型的vue</p>
<h4 id="1-跨生命周期的调用"><a href="#1-跨生命周期的调用" class="headerlink" title="1. 跨生命周期的调用"></a>1. 跨生命周期的调用</h4><p>vue应该是在不同的生命周期里面执行不同的操作，所以有严格的限制条件，但是某些特殊情况下我们是需要跨生命周期调用的，这咋办呢。如下案例所示</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;app&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">h2</span> <span class="hljs-attr">ref</span>=<span class="hljs-string">&quot;h2&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./js/vue.min.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    <span class="hljs-keyword">new</span> Vue(&#123;</span><br><span class="javascript">        <span class="hljs-attr">el</span>: <span class="hljs-string">&quot;#app&quot;</span>,</span><br><span class="javascript">        <span class="hljs-attr">data</span>: &#123;</span><br><span class="javascript">            <span class="hljs-attr">age</span>: <span class="hljs-number">18</span></span><br><span class="javascript">        &#125;,</span><br><span class="javascript">        <span class="hljs-function"><span class="hljs-title">created</span>(<span class="hljs-params"></span>)</span> &#123;</span><br><span class="javascript">            <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;我是created&quot;</span>);</span><br><span class="javascript">            <span class="hljs-comment">//将原来的年龄加上一个20以内的随机数，然后设置在h2上面，但是要通过dom操作</span></span><br><span class="javascript">            <span class="hljs-keyword">let</span> newAge  = <span class="hljs-built_in">this</span>.age + <span class="hljs-built_in">parseInt</span>(<span class="hljs-built_in">Math</span>.random() * <span class="hljs-number">20</span>);</span><br><span class="javascript">            <span class="hljs-built_in">this</span>.$refs.h2.innerText = newAge;</span><br><span class="javascript">        &#125;,</span><br><span class="javascript">        <span class="hljs-function"><span class="hljs-title">mounted</span>(<span class="hljs-params"></span>)</span> &#123;</span><br><span class="javascript">        &#125;</span><br><span class="javascript">    &#125;);</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<blockquote>
<p>在上面的代码当中，我们可以看到，我们在<code>created()</code>生命周期里面创建了一个变量，然后要放在<code>ref</code>为h2的元素上面，怎么办</p>
<p>问题1：我不能在<code>created()</code>里面操作<code>$refs</code></p>
<p>问题2：如果我在<code>mounted()</code>操作<code>$refs</code>这个时候又拿到不变量<code>newAge</code></p>
</blockquote>
<p><strong>解决方案如下</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">new</span> Vue(&#123;<br>    <span class="hljs-attr">el</span>: <span class="hljs-string">&quot;#app&quot;</span>,<br>    <span class="hljs-attr">data</span>: &#123;<br>        <span class="hljs-attr">age</span>: <span class="hljs-number">18</span><br>    &#125;,<br>    <span class="hljs-function"><span class="hljs-title">created</span>(<span class="hljs-params"></span>)</span> &#123;<br>        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;我是created&quot;</span>);<br>        <span class="hljs-comment">//将原来的年龄加上一个20以内的随机数，然后设置在h2上面，但是要通过dom操作</span><br>        <span class="hljs-keyword">let</span> newAge  = <span class="hljs-built_in">this</span>.age + <span class="hljs-built_in">parseInt</span>(<span class="hljs-built_in">Math</span>.random() * <span class="hljs-number">20</span>);<br>        <span class="hljs-built_in">this</span>.$nextTick(<span class="hljs-function">()=&gt;</span>&#123;<br>            <span class="hljs-built_in">this</span>.$refs.h2.innerText = newAge;<br>        &#125;);<br>    &#125;,<br>    <span class="hljs-function"><span class="hljs-title">mounted</span>(<span class="hljs-params"></span>)</span> &#123;<br><br>    &#125;<br>&#125;);<br></code></pre></td></tr></table></figure>

<blockquote>
<p>我们把需要在下一个生命周期执行的代码放在了<code>$nextTick</code>里面</p>
<p><code>$nextTick()</code>官方的解释这样的，它会判断当前的代码是否可以在本生命周期执行，如果不可以会顺延到下一个生命周期，如果还不行则继续顺延，直到可以执行为止</p>
</blockquote>
<h4 id="2-v-if及v-show的区别"><a href="#2-v-if及v-show的区别" class="headerlink" title="2. v-if及v-show的区别"></a>2. v-if及v-show的区别</h4><p>之前在讲vue的基础的时候我们提到了一点，<code>v-if</code>是通过注释的方式让元素消失了，而<code>v-show</code>则是通过css属性<code>display:none</code>来操作的，但是它的本质点在生命周期里面</p>
<p><strong>v-show不会重新触发生命周期，因为本质上面是把元素隐藏了，没有销毁</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;app&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">&quot;flag = !flag&quot;</span>&gt;</span>切换<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>        <span class="hljs-comment">&lt;!--这里使用了v-show的操作 --&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">one</span> <span class="hljs-attr">v-show</span>=<span class="hljs-string">&quot;flag&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">one</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;temp1&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>我是一个数:&#123;&#123;num&#125;&#125;<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./js/vue.min.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    <span class="hljs-keyword">let</span> one = &#123;</span><br><span class="javascript">        <span class="hljs-attr">template</span>:<span class="hljs-string">&quot;#temp1&quot;</span>,</span><br><span class="javascript">        <span class="hljs-function"><span class="hljs-title">data</span>(<span class="hljs-params"></span>)</span>&#123;</span><br><span class="javascript">            <span class="hljs-keyword">return</span> &#123;</span><br><span class="javascript">                <span class="hljs-attr">num</span>:<span class="hljs-number">18</span></span><br><span class="javascript">            &#125;</span><br><span class="javascript">        &#125;,</span><br><span class="javascript">        <span class="hljs-function"><span class="hljs-title">created</span>(<span class="hljs-params"></span>)</span>&#123;</span><br><span class="javascript">            <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;我是组件内部的created&quot;</span>+<span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>().toLocaleString())</span><br><span class="javascript">        &#125;</span><br><span class="javascript">    &#125;</span><br><span class="javascript">    <span class="hljs-keyword">new</span> Vue(&#123;</span><br><span class="javascript">        <span class="hljs-attr">el</span>: <span class="hljs-string">&quot;#app&quot;</span>,</span><br><span class="javascript">        <span class="hljs-attr">data</span>:&#123;</span><br><span class="javascript">            <span class="hljs-attr">flag</span>:<span class="hljs-literal">true</span></span><br><span class="javascript">        &#125;,</span><br><span class="javascript">        <span class="hljs-attr">components</span>:&#123;</span><br><span class="javascript">            one</span><br><span class="javascript">        &#125;</span><br><span class="javascript">    &#125;);</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p>我们同样的，把上面的代码替换成<code>v-if</code>来试一下</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">one</span> <span class="hljs-attr">v-if</span>=<span class="hljs-string">&quot;flag&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">one</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p>这个时候我们发现，每次重新显示的时候，生命周期都重新执行了，这说明每次重新显示都是重新创建了一个新的组件</p>
<h4 id="3-keep-alive的使用"><a href="#3-keep-alive的使用" class="headerlink" title="3. keep-alive的使用"></a>3. keep-alive的使用</h4><p>vue及所有的组件正常情况下都要经历上面的四个过程，从创建到销毁，但是有一个特殊情况，主是这个组件吃了长生不死药，它不死，对于这种情况，我们叫上<code>keep-alive</code></p>
<p>在vue的内部，有一个自带的组件叫  <code>&lt;keep-alive&gt;</code>在这个组件下面的内容是不会被销毁掉的，也就是不 会执行 destory 这个过程</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;app&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">&quot;flag = !flag&quot;</span>&gt;</span>切换<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">keep-alive</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">one</span> <span class="hljs-attr">v-if</span>=<span class="hljs-string">&quot;flag&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">one</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">keep-alive</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;temp1&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>我是一个数:&#123;&#123;num&#125;&#125;<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./js/vue.min.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    <span class="hljs-keyword">let</span> one = &#123;</span><br><span class="javascript">        <span class="hljs-attr">template</span>:<span class="hljs-string">&quot;#temp1&quot;</span>,</span><br><span class="javascript">        <span class="hljs-function"><span class="hljs-title">data</span>(<span class="hljs-params"></span>)</span>&#123;</span><br><span class="javascript">            <span class="hljs-keyword">return</span> &#123;</span><br><span class="javascript">                <span class="hljs-attr">num</span>:<span class="hljs-number">18</span></span><br><span class="javascript">            &#125;</span><br><span class="javascript">        &#125;,</span><br><span class="javascript">        <span class="hljs-function"><span class="hljs-title">created</span>(<span class="hljs-params"></span>)</span>&#123;</span><br><span class="javascript">            <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;我是组件内部的created&quot;</span>+<span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>().toLocaleString())</span><br><span class="javascript">        &#125;，</span><br><span class="javascript">        <span class="hljs-function"><span class="hljs-title">activated</span>(<span class="hljs-params"></span>)</span>&#123;</span><br><span class="javascript">            <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;activated,我被激活显示了&quot;</span>);</span><br><span class="javascript">        &#125;,</span><br><span class="javascript">        <span class="hljs-function"><span class="hljs-title">deactivated</span>(<span class="hljs-params"></span>)</span>&#123;</span><br><span class="javascript">            <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;deactivated,我又被隐藏了&quot;</span>);</span><br><span class="javascript">        &#125;</span><br><span class="javascript">    &#125;</span><br><span class="javascript">    <span class="hljs-keyword">new</span> Vue(&#123;</span><br><span class="javascript">        <span class="hljs-attr">el</span>: <span class="hljs-string">&quot;#app&quot;</span>,</span><br><span class="javascript">        <span class="hljs-attr">data</span>:&#123;</span><br><span class="javascript">            <span class="hljs-attr">flag</span>:<span class="hljs-literal">true</span></span><br><span class="javascript">        &#125;,</span><br><span class="javascript">        <span class="hljs-attr">components</span>:&#123;</span><br><span class="javascript">            one</span><br><span class="javascript">        &#125;</span><br><span class="javascript">    &#125;);</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<blockquote>
<p><strong>代码分析</strong>：</p>
<p>在上面的代码里同，因为<code>one</code>的组件是被<code>&lt;keep-alive&gt;</code>，即使我使用了<code>v-if</code>想去销毁它，这也不行，它不会被销毁</p>
</blockquote>
<p>当一个组件如果被 <code>keep-alive</code>以后，它就不会销毁，但是又多了两个特殊的生命周期钩子函数 </p>
<ol>
<li><code>activated</code>当激活【显示】的时候触发</li>
<li><code>deactivated</code>当休眠【隐藏】的时候触发</li>
</ol>
<h4 id="4-vue1-0与2-0生命周期对比"><a href="#4-vue1-0与2-0生命周期对比" class="headerlink" title="4. vue1.0与2.0生命周期对比"></a>4. vue1.0与2.0生命周期对比</h4><p><img src="https://pic.imgdb.cn/item/618e5b222ab3f51d91f5e2b6.jpg" srcset="/blog/img/loading.gif" lazyload alt="vue生命周期对比图"></p>
<h4 id="5-生命周期图"><a href="#5-生命周期图" class="headerlink" title="5. 生命周期图"></a>5. 生命周期图</h4><p><img src="https://pic.imgdb.cn/item/618e5b5e2ab3f51d91f5f961.jpg" srcset="/blog/img/loading.gif" lazyload alt="vue生命周期序列图"></p>
<blockquote>
<p>关于上面的那个<code>$mount</code>的过程，大家可以参考下面的代码</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">let</span> vm = <span class="hljs-keyword">new</span> Vue(&#123;<br><span class="hljs-attr">data</span>:&#123;<br>  <span class="hljs-attr">age</span>:<span class="hljs-number">18</span><br>&#125;,<br><span class="hljs-attr">computed</span>:&#123;<br>  <span class="hljs-function"><span class="hljs-title">userName</span>(<span class="hljs-params"></span>)</span>&#123;<br>      <span class="hljs-keyword">return</span>  <span class="hljs-string">&quot;帅哥&quot;</span>;<br>  &#125;<br>&#125;,<br><span class="hljs-attr">methods</span>:&#123;<br>  <span class="hljs-function"><span class="hljs-title">sayHello</span>(<span class="hljs-params"></span>)</span>&#123;<br>      <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;我是一个方法&quot;</span>)<br>  &#125;<br>&#125;,<br>&#125;);<br>vm.$mount(<span class="hljs-string">&quot;#app&quot;</span>);<br></code></pre></td></tr></table></figure>
</blockquote>
<h3 id="十二、关于组件的属性传值注意事项"><a href="#十二、关于组件的属性传值注意事项" class="headerlink" title="十二、关于组件的属性传值注意事项"></a>十二、关于组件的属性传值注意事项</h3><p>在组件内部如果要进行传值 ，我们推荐使用自定义属性传值 ，如下所示</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">one</span> <span class="hljs-attr">userName</span>=<span class="hljs-string">&quot;张三&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">one</span>&gt;</span><br><span class="hljs-comment">&lt;!--向组件内部传递了一个属性，userName，值为&quot;张三&quot; --&gt;</span><br><br><span class="hljs-tag">&lt;<span class="hljs-name">one</span> <span class="hljs-attr">age</span>=<span class="hljs-string">&quot;18&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">one</span>&gt;</span><br><span class="hljs-comment">&lt;!-- 向组件内部传递了一个属性 age,值为&quot;18&quot;，请注意是字符串的18 --&gt;</span><br><br><span class="hljs-tag">&lt;<span class="hljs-name">one</span> <span class="hljs-attr">:age</span>=<span class="hljs-string">&quot;18&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">one</span>&gt;</span><br><span class="hljs-comment">&lt;!-- 这代表向组件内部传递一个属性age,值为18，这里是数据类型的18 --&gt;</span><br><br><span class="hljs-tag">&lt;<span class="hljs-name">one</span> <span class="hljs-attr">show-back</span>=<span class="hljs-string">&quot;true&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">one</span>&gt;</span><br><span class="hljs-comment">&lt;!-- 这代表向件内部传递showBack,值为字符串的&quot;true&quot; --&gt;</span><br><br><br><span class="hljs-tag">&lt;<span class="hljs-name">one</span> <span class="hljs-attr">:show-back</span>=<span class="hljs-string">&quot;true&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">one</span>&gt;</span><br><span class="hljs-comment">&lt;!-- 这传递的就是布尔类型的true --&gt;</span><br></code></pre></td></tr></table></figure>

<p><strong>易错点</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">one</span> <span class="hljs-attr">show-back</span>=<span class="hljs-string">&quot;false&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">one</span>&gt;</span><br><span class="hljs-comment">&lt;!--内部如果想接收布尔类型，但是我们传递了字符串&quot;false&quot;，在转换的时候Boolean(&quot;false&quot;)结果是true --&gt;</span><br></code></pre></td></tr></table></figure>

<p>自定义属性在传递数据的时候默认都是字符中，如果是其它 的数据类型，请使用动态绑定</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">one</span> <span class="hljs-attr">:show-back</span>=<span class="hljs-string">&quot;false&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">one</span>&gt;</span><br></code></pre></td></tr></table></figure>

<h2 id="3-vue-router路由"><a href="#3-vue-router路由" class="headerlink" title="3.vue-router路由"></a>3.vue-router路由</h2><p>之前在讲vue的基础的时候给同学样讲过，vue有两个核心</p>
<ol>
<li>数据驱动页面</li>
<li>虚拟dom开发</li>
</ol>
<p>但是在vue的开发过程当中，因为它是一个渐近式的框架，所以后面有很多的第三方的框架也可以跟它进行扩展组合，其实比较流行的就是<code>vue-router</code>算中一个</p>
<blockquote>
<p>因为vue是一个渐近式的框架，所以有第多第三方的插件围绕它进行，同时还有一些官方的vue的插件，这些插件与vue结合在一起以后，我们称之为vue全家桶</p>
</blockquote>
<h3 id="一、前端路由的原理"><a href="#一、前端路由的原理" class="headerlink" title="一、前端路由的原理"></a>一、前端路由的原理</h3><p>现在同学样想象一下，为什么需要路由，你们是怎么理解路由的？</p>
<p>在之前的express的学习当中我， 们其实已经接触到了路由，路由就是控制url的访问路由的，所以前端路由我们可以理解为在前端的浏览器控制页面的访问在</p>
<p><strong>前端路由是实现SPA开发的必经之路，也是核心技术</strong></p>
<blockquote>
<p>SPA称之为单页面开发，它是在一张页面上面展示所有的功能，通过<code>#</code>改变url的地址</p>
<p>单页Web应用（single page web application，SPA），就是只有一张Web页面的应用，是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。</p>
</blockquote>
<p><img src="https://pic.imgdb.cn/item/61924ff62ab3f51d91346f47.png" srcset="/blog/img/loading.gif" lazyload alt="image-20211115084809845"></p>
<p>现在我通过最原始的技术来实现一下前端的效果</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-meta-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;zh&quot;</span>&gt;</span><br><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">http-equiv</span>=<span class="hljs-string">&quot;X-UA-Compatible&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;IE=edge&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;viewport&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>模拟单页开发<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="css"></span><br><span class="css">        * &#123;</span><br><span class="css">            <span class="hljs-attribute">margin</span>: <span class="hljs-number">0</span>;</span><br><span class="css">            <span class="hljs-attribute">padding</span>: <span class="hljs-number">0</span>;</span><br><span class="css">            <span class="hljs-attribute">list-style-type</span>: none;</span><br><span class="css">        &#125;</span><br><span class="css"></span><br><span class="css">        <span class="hljs-selector-id">#app</span> &#123;</span><br><span class="css">            <span class="hljs-attribute">width</span>: <span class="hljs-number">100%</span>;</span><br><span class="css">            <span class="hljs-attribute">height</span>: <span class="hljs-number">100%</span>;</span><br><span class="css">            <span class="hljs-attribute">position</span>: fixed;</span><br><span class="css">            <span class="hljs-attribute">left</span>: <span class="hljs-number">0px</span>;</span><br><span class="css">            <span class="hljs-attribute">top</span>: <span class="hljs-number">0px</span>;</span><br><span class="css">        &#125;</span><br><span class="css"></span><br><span class="css">        <span class="hljs-selector-id">#login</span>,</span><br><span class="css">        <span class="hljs-selector-id">#register</span> &#123;</span><br><span class="css">            <span class="hljs-attribute">width</span>: <span class="hljs-number">100%</span>;</span><br><span class="css">            <span class="hljs-attribute">height</span>: <span class="hljs-number">100%</span>;</span><br><span class="css">            <span class="hljs-attribute">position</span>: absolute;</span><br><span class="css">            <span class="hljs-attribute">top</span>: <span class="hljs-number">0px</span>;</span><br><span class="css">            <span class="hljs-attribute">left</span>: <span class="hljs-number">0px</span>;</span><br><span class="css">            <span class="hljs-attribute">background-color</span>: white;</span><br><span class="css">            <span class="hljs-attribute">display</span>: none;</span><br><span class="css">        &#125;</span><br><span class="css">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;app&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;login&quot;</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">h1</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;color: red;&quot;</span>&gt;</span>这是一个登陆的页面<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;register&quot;</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">h2</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;color: blue;&quot;</span>&gt;</span>这是一个注册的页面<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    <span class="hljs-built_in">window</span>.onhashchange = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">event</span>) </span>&#123;</span><br><span class="javascript">        <span class="hljs-keyword">var</span> newURL = event.newURL;</span><br><span class="javascript">        <span class="hljs-keyword">var</span> u = <span class="hljs-keyword">new</span> URL(newURL);</span><br><span class="javascript">        <span class="hljs-keyword">var</span> hash = u.hash;</span><br><span class="javascript">        <span class="hljs-built_in">document</span>.querySelector(hash).style.display = <span class="hljs-string">&quot;block&quot;</span>;</span><br><span class="javascript">    &#125;</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p>上面就是单页面开发的思路，在这个思路上面，是通过改变了url地址后面的hash值来知道我到底要显示哪个元素</p>
<p>这种实现效果首先是改变了url地址，但是改变的又是hash值，所以页面并不会刷新 ，同时另一方面也可以通过方便获取到hash值，来实现相应的操作，这其实就是前端路由的原理，改变url地址来实现页面上面呈现不同的内容</p>
<p>这么只是手动的实现原理，操作起来起来非常麻烦，我们可以借用vue</p>
<ol>
<li>把要显示的元素封装成一个组件，这个可以使用组件来模拟页面</li>
<li>元素的显示和隐藏我们可以使用<code>v-if/v-show</code></li>
</ol>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-meta-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;zh&quot;</span>&gt;</span><br><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">http-equiv</span>=<span class="hljs-string">&quot;X-UA-Compatible&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;IE=edge&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;viewport&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>模拟单页开发<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="css"></span><br><span class="css">        * &#123;</span><br><span class="css">            <span class="hljs-attribute">margin</span>: <span class="hljs-number">0</span>;</span><br><span class="css">            <span class="hljs-attribute">padding</span>: <span class="hljs-number">0</span>;</span><br><span class="css">            <span class="hljs-attribute">list-style-type</span>: none;</span><br><span class="css">        &#125;</span><br><span class="css"></span><br><span class="css">        <span class="hljs-selector-id">#app</span> &#123;</span><br><span class="css">            <span class="hljs-attribute">width</span>: <span class="hljs-number">100%</span>;</span><br><span class="css">            <span class="hljs-attribute">height</span>: <span class="hljs-number">100%</span>;</span><br><span class="css">            <span class="hljs-attribute">position</span>: fixed;</span><br><span class="css">            <span class="hljs-attribute">left</span>: <span class="hljs-number">0px</span>;</span><br><span class="css">            <span class="hljs-attribute">top</span>: <span class="hljs-number">0px</span>;</span><br><span class="css">        &#125;</span><br><span class="css"></span><br><span class="css">        <span class="hljs-selector-id">#login</span>,</span><br><span class="css">        <span class="hljs-selector-id">#register</span> &#123;</span><br><span class="css">            <span class="hljs-attribute">width</span>: <span class="hljs-number">100%</span>;</span><br><span class="css">            <span class="hljs-attribute">height</span>: <span class="hljs-number">100%</span>;</span><br><span class="css">            <span class="hljs-attribute">position</span>: absolute;</span><br><span class="css">            <span class="hljs-attribute">top</span>: <span class="hljs-number">50px</span>;</span><br><span class="css">            <span class="hljs-attribute">left</span>: <span class="hljs-number">0px</span>;</span><br><span class="css">            <span class="hljs-attribute">background-color</span>: white;</span><br><span class="css"></span><br><span class="css">        &#125;</span><br><span class="css">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;app&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">&quot;toLogin&quot;</span>&gt;</span>去登陆<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">&quot;toRegister&quot;</span>&gt;</span>去注册<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">login</span> <span class="hljs-attr">v-if</span>=<span class="hljs-string">&quot;currentShow==&#x27;#login&#x27;&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">login</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">register</span> <span class="hljs-attr">v-if</span>=<span class="hljs-string">&quot;currentShow==&#x27;#register&#x27;&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">register</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;temp1&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;login&quot;</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">h1</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;color: red;&quot;</span>&gt;</span>这是一个登陆的页面<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;temp2&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;register&quot;</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">h2</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;color: blue;&quot;</span>&gt;</span>这是一个注册的页面<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./js/vue.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    <span class="hljs-keyword">var</span> login = &#123;</span><br><span class="javascript">        <span class="hljs-attr">template</span>: <span class="hljs-string">&quot;#temp1&quot;</span></span><br><span class="javascript">    &#125;</span><br><span class="javascript">    <span class="hljs-keyword">var</span> register = &#123;</span><br><span class="javascript">        <span class="hljs-attr">template</span>: <span class="hljs-string">&quot;#temp2&quot;</span></span><br><span class="javascript">    &#125;</span><br><span class="javascript"></span><br><span class="javascript">    <span class="hljs-keyword">new</span> Vue(&#123;</span><br><span class="javascript">        <span class="hljs-attr">el</span>: <span class="hljs-string">&quot;#app&quot;</span>,</span><br><span class="javascript">        <span class="hljs-attr">data</span>: &#123;</span><br><span class="javascript">            <span class="hljs-attr">currentShow</span>: <span class="hljs-string">&quot;#login&quot;</span></span><br><span class="javascript">        &#125;,</span><br><span class="javascript">        <span class="hljs-attr">components</span>: &#123;</span><br><span class="javascript">            login,</span><br><span class="javascript">            register</span><br><span class="javascript">        &#125;,</span><br><span class="javascript">        <span class="hljs-function"><span class="hljs-title">mounted</span>(<span class="hljs-params"></span>)</span> &#123;</span><br><span class="javascript">            <span class="hljs-built_in">window</span>.onhashchange = <span class="hljs-function">(<span class="hljs-params">event</span>) =&gt;</span> &#123;</span><br><span class="javascript">                <span class="hljs-keyword">let</span> hash = <span class="hljs-keyword">new</span> URL(event.newURL).hash;</span><br><span class="javascript">                <span class="hljs-built_in">this</span>.currentShow = hash;</span><br><span class="javascript">            &#125;</span><br><span class="javascript">        &#125;,</span><br><span class="javascript">        <span class="hljs-attr">methods</span>: &#123;</span><br><span class="javascript">            <span class="hljs-function"><span class="hljs-title">toLogin</span>(<span class="hljs-params"></span>)</span> &#123;</span><br><span class="javascript">                location.hash = <span class="hljs-string">&quot;#login&quot;</span>;</span><br><span class="javascript">            &#125;,</span><br><span class="javascript">            <span class="hljs-function"><span class="hljs-title">toRegister</span>(<span class="hljs-params"></span>)</span> &#123;</span><br><span class="javascript">                location.hash = <span class="hljs-string">&quot;#register&quot;</span>;</span><br><span class="javascript">            &#125;</span><br><span class="javascript">        &#125;</span><br><span class="javascript">    &#125;)</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>

<blockquote>
<p>这个代码其实就是借用于vue和组件来实现了单页面的开发，但是这么做，我们仍然觉得麻烦，vue有一个全家桶的插件叫<code>vue-rotuer</code>可以自动的帮我们实现上面的功能 </p>
</blockquote>
<h3 id="二、vue-router的安装"><a href="#二、vue-router的安装" class="headerlink" title="二、vue-router的安装"></a>二、vue-router的安装</h3><p>这个插件是vue全家桶里面的一个插件，它只可以通过hash值来决定到底显示哪一个虚拟页面(虚拟页面就是组件)</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs bash">$ yarn add vue-router<br></code></pre></td></tr></table></figure>

<h3 id="三、vue-router路由的创建"><a href="#三、vue-router路由的创建" class="headerlink" title="三、vue-router路由的创建"></a>三、vue-router路由的创建</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-meta-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;zh&quot;</span>&gt;</span><br><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">http-equiv</span>=<span class="hljs-string">&quot;X-UA-Compatible&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;IE=edge&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;viewport&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>vue路由<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="css"></span><br><span class="css">        * &#123;</span><br><span class="css">            <span class="hljs-attribute">margin</span>: <span class="hljs-number">0</span>;</span><br><span class="css">            <span class="hljs-attribute">padding</span>: <span class="hljs-number">0</span>;</span><br><span class="css">        &#125;</span><br><span class="css">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;app&quot;</span>&gt;</span><br>        <span class="hljs-comment">&lt;!-- 我要根据路由管理对象在这里动态的显示内容 --&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">router-view</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">router-view</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;temp1&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">h2</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;color: blue;&quot;</span>&gt;</span>这是一个登陆页面<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;temp2&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">h2</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;color: red;&quot;</span>&gt;</span>这是一个注册页面<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./js/vue.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./js/vue-router.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    <span class="hljs-keyword">var</span> login = &#123;</span><br><span class="javascript">        <span class="hljs-attr">template</span>: <span class="hljs-string">&quot;#temp1&quot;</span></span><br><span class="javascript">    &#125;</span><br><span class="javascript">    <span class="hljs-keyword">var</span> register = &#123;</span><br><span class="javascript">        <span class="hljs-attr">template</span>: <span class="hljs-string">&quot;#temp2&quot;</span></span><br><span class="javascript">    &#125;</span><br><span class="javascript"></span><br><span class="javascript">    <span class="hljs-comment">//router 带了r的代表路由管理对象</span></span><br><span class="javascript">    <span class="hljs-keyword">var</span> router = <span class="hljs-keyword">new</span> VueRouter(&#123;</span><br><span class="javascript">        <span class="hljs-comment">//route 没有带r代表路由单体对象</span></span><br><span class="javascript">        <span class="hljs-attr">routes</span>:[</span><br><span class="javascript">            &#123;</span><br><span class="javascript">                <span class="hljs-attr">path</span>: <span class="hljs-string">&quot;/&quot;</span>,</span><br><span class="javascript">                <span class="hljs-attr">redirect</span>: <span class="hljs-string">&quot;/login&quot;</span></span><br><span class="javascript">            &#125;,</span><br><span class="javascript">            &#123;</span><br><span class="javascript">                <span class="hljs-attr">path</span>:<span class="hljs-string">&quot;/login&quot;</span>,</span><br><span class="javascript">                <span class="hljs-attr">component</span>:login</span><br><span class="javascript">            &#125;,&#123;</span><br><span class="javascript">                <span class="hljs-attr">path</span>:<span class="hljs-string">&quot;/register&quot;</span>,</span><br><span class="javascript">                <span class="hljs-attr">component</span>:register</span><br><span class="javascript">            &#125;</span><br><span class="javascript">        ]</span><br><span class="javascript">    &#125;);</span><br><span class="javascript"></span><br><span class="javascript">    <span class="hljs-keyword">new</span> Vue(&#123;</span><br><span class="javascript">        <span class="hljs-attr">el</span>: <span class="hljs-string">&quot;#app&quot;</span>,</span><br><span class="javascript">        router</span><br><span class="javascript">    &#125;)</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>

<blockquote>
<p>在上面的代码当中，就一个最简单的vue-router创建与使用的过程，它的步骤大概可以分为下面的几个过程</p>
<ol>
<li>导入vue-router插件</li>
<li>创建组件</li>
<li>使用<code>var router = new VueRouter</code>来创建路由管理对象</li>
<li>在路由管理对象里在，创建 <code>routes</code>属性，这里面代表每一个路由的单体对象</li>
<li><code>path</code>用于决定路由，<code>component</code>用于决定在这个路由下面显示什么组件</li>
<li>将路由管理对象<code>router</code>设置在<code>vue</code>里面</li>
<li>在上面的第一个路由单体对象上面， 我们设置的路径 是<code>path:&quot;/&quot;</code>，但是我们通过<code>redirect:&quot;/login&quot;</code>来实现了重定向</li>
</ol>
</blockquote>
<h3 id="四、router-link及router-view"><a href="#四、router-link及router-view" class="headerlink" title="四、router-link及router-view"></a>四、router-link及router-view</h3><p>关于<code>router-view</code>已经在上面章节讲到了，它是根据路由管理对象来决定到底显示哪个组件，而<code>rotuer-link</code>则是用于跳转页面的，例如上面的案例当中，我们想让用户从登陆页跳到注册页，或由注册页返回到登陆页，怎么办呢？ 这个时候就必须有连接进行跳转，vue的里面，我们可以使用<code>router-link</code>来完成</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;temp1&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">h2</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;color: blue;&quot;</span>&gt;</span>这是一个登录页面<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span><br>        <span class="hljs-comment">&lt;!-- 我要给一个链接去跳页面 --&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">router-link</span> <span class="hljs-attr">to</span>=<span class="hljs-string">&quot;/register&quot;</span>&gt;</span>我要去注册的页面啦~~~~~~<span class="hljs-tag">&lt;/<span class="hljs-name">router-link</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;temp2&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">h2</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;color: red;&quot;</span>&gt;</span>这是一个注册页面<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">router-link</span> <span class="hljs-attr">tag</span>=<span class="hljs-string">&quot;span&quot;</span> <span class="hljs-attr">to</span>=<span class="hljs-string">&quot;/login&quot;</span>&gt;</span>我要重新回到我的登录页面.............<span class="hljs-tag">&lt;/<span class="hljs-name">router-link</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p>上面的代码当中，我们分别在两个组件的下面使使用了<code>router-link</code>的内置组件，然后设置了<code>to</code>的属性，这样在页面上面会默认生成一个<code>a</code>标签</p>
<p><img src="https://pic.imgdb.cn/item/619250112ab3f51d9134790e.png" srcset="/blog/img/loading.gif" lazyload alt="image-20211115093550919"></p>
<p>:tipping_hand_man: <strong>注意</strong> ：<code>router-link</code>默认生成的是a标签，如果想生成其它标签，可以直接使用<code>tag</code></p>
<blockquote>
<p>这里的router-link还有一个样式属性没有，要到脚手架或嵌套路由里面讲</p>
</blockquote>
<p>在上面进行路由跳转的时候，同学们都看到我们是直接使用了<code>path</code>去查找路由然后跳转，正常工作当中，我们经常会把所有的路由都设置一个不重复的名子（这个名子是千万不能重复的），然后通过名子去管理路由</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><code class="hljs script">//router 带了r的代表路由管理对象<br>   var router = new VueRouter(&#123;<br>       //route 没有带r代表路由单体对象<br>       routes: [&#123;<br>               path: &quot;/&quot;,<br>               redirect: &quot;/login&quot;<br>           &#125;,<br>           &#123;<br>               path: &quot;/login&quot;,<br>               component: login,<br>               name: &quot;login&quot;<br>           &#125;, &#123;<br>               path: &quot;/register&quot;,<br>               component: register,<br>               name: &quot;register&quot;<br>           &#125;<br>       ]<br>   &#125;);<br></code></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">router-link</span> <span class="hljs-attr">:to</span>=<span class="hljs-string">&quot;&#123;name:&#x27;register&#x27;&#125;&quot;</span>&gt;</span>我要去注册的页面啦~~~~~~<span class="hljs-tag">&lt;/<span class="hljs-name">router-link</span>&gt;</span><br></code></pre></td></tr></table></figure>

<h3 id="五、api跳转"><a href="#五、api跳转" class="headerlink" title="五、api跳转"></a>五、api跳转</h3><p>在上面的章节当中，我们已经可以使用<code>router-link</code>来实现页面的跳转，如果我们想通过js代码的形式来跳转，怎么办呢？</p>
<p>这里的api跳转其实就是路由管理对象的api</p>
<ol>
<li><code>$router.push()</code>路由入栈</li>
<li><code>$router.back()</code>路由出栈</li>
<li><code>$router.replace()</code>路由替换</li>
</ol>
<p>api的采取是栈的操作，<code>push</code>相当于入栈，把一个新的路径放入地址栈中，后期可以通过<code>back</code>退出来，<code>back</code>查当于出栈，从栈里面退了同个页面，<code>replace</code>则是替换，从页面栈里面替换一个出来 </p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;temp1&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">h2</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;color: blue;&quot;</span>&gt;</span>这是一个登录页面<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span><br>        <span class="hljs-comment">&lt;!-- 我要给一个链接去跳页面 --&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">&quot;toRegister&quot;</span>&gt;</span>去注册页面~~~~~<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;temp2&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">h2</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;color: red;&quot;</span>&gt;</span>这是一个注册页面<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">&quot;backLogin&quot;</span>&gt;</span>返回到登录页面..........<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">	<span class="hljs-keyword">var</span> login = &#123;</span><br><span class="javascript">        <span class="hljs-attr">template</span>: <span class="hljs-string">&quot;#temp1&quot;</span>,</span><br><span class="javascript">        <span class="hljs-attr">methods</span>: &#123;</span><br><span class="javascript">            <span class="hljs-function"><span class="hljs-title">toRegister</span>(<span class="hljs-params"></span>)</span> &#123;</span><br><span class="javascript">                <span class="hljs-comment">//直接入栈，后期可以返回</span></span><br><span class="javascript">                <span class="hljs-comment">/*</span></span><br><span class="hljs-comment"><span class="javascript">                this.$router.push(&#123;</span></span><br><span class="hljs-comment"><span class="javascript">                    name: &quot;register&quot;</span></span><br><span class="hljs-comment"><span class="javascript">                &#125;)</span></span><br><span class="hljs-comment"><span class="javascript">                */</span></span><br><span class="javascript"></span><br><span class="javascript">                <span class="hljs-comment">//替换，后期返回不了</span></span><br><span class="javascript">                <span class="hljs-built_in">this</span>.$router.replace(&#123;</span><br><span class="javascript">                    <span class="hljs-attr">name</span>:<span class="hljs-string">&quot;register&quot;</span></span><br><span class="javascript">                &#125;)</span><br><span class="javascript">            &#125;</span><br><span class="javascript">        &#125;</span><br><span class="javascript">    &#125;</span><br><span class="javascript">    <span class="hljs-keyword">var</span> register = &#123;</span><br><span class="javascript">        <span class="hljs-attr">template</span>: <span class="hljs-string">&quot;#temp2&quot;</span>,</span><br><span class="javascript">        <span class="hljs-attr">methods</span>: &#123;</span><br><span class="javascript">            <span class="hljs-function"><span class="hljs-title">backLogin</span>(<span class="hljs-params"></span>)</span> &#123;</span><br><span class="javascript">                <span class="hljs-comment">//直接返回</span></span><br><span class="javascript">                <span class="hljs-built_in">this</span>.$router.back();</span><br><span class="javascript">            &#125;</span><br><span class="javascript">        &#125;</span><br><span class="javascript">    &#125;</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<h3 id="六、路由传值"><a href="#六、路由传值" class="headerlink" title="六、路由传值"></a>六、路由传值</h3><p>vue-router实现了虚拟页面（组件）之间的跳转。同时，我们之前也讲过页面应该是可以传值的，所以虚拟页面之间应该也是可以传值的</p>
<p>在<code>vue-router</code>里面是具备这个功能的</p>
<h4 id="1-通过query进行传值"><a href="#1-通过query进行传值" class="headerlink" title="1. 通过query进行传值"></a>1. 通过query进行传值</h4><p><strong>login页面传递过程</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> login = &#123;<br>    <span class="hljs-attr">template</span>: <span class="hljs-string">&quot;#temp1&quot;</span>,<br>    <span class="hljs-attr">methods</span>: &#123;<br>        <span class="hljs-function"><span class="hljs-title">toRegister</span>(<span class="hljs-params"></span>)</span> &#123;<br>            <span class="hljs-built_in">this</span>.$router.push(&#123;<br>                <span class="hljs-attr">name</span>: <span class="hljs-string">&quot;register&quot;</span>,<br>                <span class="hljs-attr">query</span>: &#123;<br>                    <span class="hljs-attr">userName</span>: <span class="hljs-string">&quot;小珊子&quot;</span><br>                &#125;<br>            &#125;)<br>        &#125;<br>    &#125;<br>&#125;<br></code></pre></td></tr></table></figure>

<p>在上面的代码里面，我们通过<code>query</code>向<code>register</code>的面面传递了一个<code>userName</code>，这个时候在跳转页面的时候，地址栏变成了如下格式</p>
<p><img src="https://pic.imgdb.cn/item/619250262ab3f51d9134805b.png" srcset="/blog/img/loading.gif" lazyload alt="image-20211115104521457"></p>
<p>这个时候后面跟了一个<code>?userName=小珊子</code></p>
<p>如果有两个值，则如下所示</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-built_in">this</span>.$router.push(&#123;<br>    <span class="hljs-attr">name</span>: <span class="hljs-string">&quot;register&quot;</span>,<br>    <span class="hljs-attr">query</span>: &#123;<br>        <span class="hljs-attr">userName</span>: <span class="hljs-string">&quot;小珊子&quot;</span>,<br>        <span class="hljs-attr">age</span>:<span class="hljs-number">18</span><br>    &#125;<br>&#125;)<br></code></pre></td></tr></table></figure>

<p><img src="https://pic.imgdb.cn/item/619250352ab3f51d91348678.png" srcset="/blog/img/loading.gif" lazyload alt="image-20211115104621500"></p>
<p>这一点跟我们之前的<code>search</code>传值很像</p>
<p><strong>register页面接收过程</strong></p>
<p> 当我们在当前的这个页面上面打印<code>this.$route</code>的时候，可以看到如下信息<br><img src="https://pic.imgdb.cn/item/6192504f2ab3f51d91348e5d.png" srcset="/blog/img/loading.gif" lazyload alt="image-20211115105150073"></p>
<p>我们可以看到，前一个页面通过<code>query</code>传递过来的时候，在当前页面使用<code>this.$route.query</code>可以访问得到</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> register = &#123;<br>    <span class="hljs-attr">template</span>: <span class="hljs-string">&quot;#temp2&quot;</span>,<br>    <span class="hljs-attr">methods</span>: &#123;<br>        <span class="hljs-function"><span class="hljs-title">backLogin</span>(<span class="hljs-params"></span>)</span> &#123;<br>            <span class="hljs-comment">//直接返回</span><br>            <span class="hljs-built_in">this</span>.$router.back();<br>        &#125;<br>    &#125;,<br>    <span class="hljs-function"><span class="hljs-title">created</span>(<span class="hljs-params"></span>)</span>&#123;<br>        <span class="hljs-comment">//我要在打开这个对象的时候就接收值</span><br>        <span class="hljs-built_in">console</span>.log(<span class="hljs-built_in">this</span>.$route.query.userName)<br>        <span class="hljs-built_in">console</span>.log(<span class="hljs-built_in">this</span>.$route.query.age)<br>    &#125;<br>&#125;<br></code></pre></td></tr></table></figure>

<h4 id="2-通过params进行传值"><a href="#2-通过params进行传值" class="headerlink" title="2.通过params进行传值"></a>2.通过params进行传值</h4><p>这一种传值方式我们也经常使用，不过稍显复杂一点，params叫路径传值</p>
<p><strong>login页面传递过程</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-built_in">this</span>.$router.push(&#123;<br>    <span class="hljs-attr">name</span>: <span class="hljs-string">&quot;register&quot;</span>,<br>    <span class="hljs-comment">//这里使用的是params传值</span><br>    <span class="hljs-attr">params</span>:&#123;<br>        <span class="hljs-attr">userName</span>:<span class="hljs-string">&quot;小珊子&quot;</span>,<br>        <span class="hljs-attr">age</span>:<span class="hljs-number">18</span><br>    &#125;<br>&#125;)<br></code></pre></td></tr></table></figure>

<p>除了上面的跳转代码以外，还要在路由里面设置一下</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">//router 带了r的代表路由管理对象</span><br>   <span class="hljs-keyword">var</span> router = <span class="hljs-keyword">new</span> VueRouter(&#123;<br>       <span class="hljs-comment">//route 没有带r代表路由单体对象</span><br>       <span class="hljs-attr">routes</span>: [&#123;<br>               <span class="hljs-attr">path</span>: <span class="hljs-string">&quot;/&quot;</span>,<br>               <span class="hljs-attr">redirect</span>: <span class="hljs-string">&quot;/login&quot;</span><br>           &#125;,<br>           &#123;<br>               <span class="hljs-attr">path</span>: <span class="hljs-string">&quot;/login&quot;</span>,<br>               <span class="hljs-attr">component</span>: login,<br>               <span class="hljs-attr">name</span>: <span class="hljs-string">&quot;login&quot;</span><br>           &#125;, &#123;<br>               <span class="hljs-comment">//在原本的/register后面添加了两个路由变量</span><br>               <span class="hljs-attr">path</span>: <span class="hljs-string">&quot;/register/:userName/:age&quot;</span>,<br>               <span class="hljs-attr">component</span>: register,<br>               <span class="hljs-attr">name</span>: <span class="hljs-string">&quot;register&quot;</span><br>           &#125;<br>       ]<br>   &#125;);<br></code></pre></td></tr></table></figure>

<p><strong>register页面的接收</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> register = &#123;<br>    <span class="hljs-attr">template</span>: <span class="hljs-string">&quot;#temp2&quot;</span>,<br>    <span class="hljs-attr">methods</span>: &#123;<br>        <span class="hljs-function"><span class="hljs-title">backLogin</span>(<span class="hljs-params"></span>)</span> &#123;<br>            <span class="hljs-comment">//直接返回</span><br>            <span class="hljs-built_in">this</span>.$router.back();<br>        &#125;<br>    &#125;,<br>    <span class="hljs-function"><span class="hljs-title">created</span>(<span class="hljs-params"></span>)</span>&#123;<br>        <span class="hljs-built_in">console</span>.log(<span class="hljs-built_in">this</span>.$route)<br>    &#125;<br>&#125;<br></code></pre></td></tr></table></figure>

<p><img src="https://pic.imgdb.cn/item/619250602ab3f51d91349305.png" srcset="/blog/img/loading.gif" lazyload alt="image-20211115110025716"></p>
<blockquote>
<p>这一种传值就有一个先天性的优先，如果设置要传递的值 ，如果不传就进不了这个路由</p>
</blockquote>
<h3 id="七、路由管理对象与路由单体对象"><a href="#七、路由管理对象与路由单体对象" class="headerlink" title="七、路由管理对象与路由单体对象"></a>七、路由管理对象与路由单体对象</h3><p><strong>$router</strong>路由管理对象是用于管理页面之间的跳转的，如果你要跳转哪个页面，由要使用管理对象</p>
<p><strong>$route</strong>路由单体对象是用于记录当前路由信息的对象，如果你想获取这个虚拟页面上面的信息，则应该是路由单对象</p>
<p>在vue或vue的组件内部，我们可以通过<code>this.$router</code>来获取路由管理对象，可以通过<code>this.$route</code>来获取当前虚拟页面的路由单体对象</p>
<h3 id="八、嵌套路由的使用"><a href="#八、嵌套路由的使用" class="headerlink" title="八、嵌套路由的使用"></a>八、嵌套路由的使用</h3><p>当我们发现如果一个页面只需要替换部分区域的时候，我们就可以使用嵌套路由</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-meta-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;zh&quot;</span>&gt;</span><br><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">http-equiv</span>=<span class="hljs-string">&quot;X-UA-Compatible&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;IE=edge&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;viewport&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>嵌套路由<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="css"></span><br><span class="css">        * &#123;</span><br><span class="css">            <span class="hljs-attribute">margin</span>: <span class="hljs-number">0</span>;</span><br><span class="css">            <span class="hljs-attribute">padding</span>: <span class="hljs-number">0</span>;</span><br><span class="css">        &#125;</span><br><span class="css">        <span class="hljs-selector-tag">html</span>,</span><br><span class="css">        <span class="hljs-selector-tag">body</span>,</span><br><span class="css">        <span class="hljs-selector-id">#app</span> &#123;</span><br><span class="css">            <span class="hljs-attribute">width</span>: <span class="hljs-number">100%</span>;</span><br><span class="css">            <span class="hljs-attribute">height</span>: <span class="hljs-number">100%</span>;</span><br><span class="css">        &#125;</span><br><span class="css">        </span><br><span class="css">        <span class="hljs-selector-id">#login</span> &#123;</span><br><span class="css">            <span class="hljs-attribute">width</span>: <span class="hljs-number">100%</span>;</span><br><span class="css">            <span class="hljs-attribute">height</span>: <span class="hljs-number">100%</span>;</span><br><span class="css">            <span class="hljs-attribute">background-color</span>: lightblue;</span><br><span class="css">        &#125;</span><br><span class="css">        </span><br><span class="css">        <span class="hljs-selector-id">#adminIndex</span> &#123;</span><br><span class="css">            <span class="hljs-attribute">height</span>: <span class="hljs-number">100%</span>;</span><br><span class="css">            <span class="hljs-attribute">width</span>: <span class="hljs-number">100%</span>;</span><br><span class="css">            <span class="hljs-attribute">background-color</span>: orange;</span><br><span class="css">            <span class="hljs-attribute">position</span>: relative;</span><br><span class="css">        &#125;</span><br><span class="css"></span><br><span class="css">        <span class="hljs-selector-id">#adminIndex</span> <span class="hljs-selector-class">.left</span> &#123;</span><br><span class="css">            <span class="hljs-attribute">position</span>: absolute;</span><br><span class="css">            <span class="hljs-attribute">width</span>: <span class="hljs-number">170px</span>;</span><br><span class="css">            <span class="hljs-attribute">box-sizing</span>: border-box;</span><br><span class="css">            <span class="hljs-attribute">border-right</span>: <span class="hljs-number">1px</span> solid gray;</span><br><span class="css">            <span class="hljs-attribute">height</span>: <span class="hljs-number">100%</span>;</span><br><span class="css">        &#125;</span><br><span class="css"></span><br><span class="css">        <span class="hljs-selector-id">#adminIndex</span> <span class="hljs-selector-class">.right</span> &#123;</span><br><span class="css">            <span class="hljs-attribute">position</span>: absolute;</span><br><span class="css">            <span class="hljs-attribute">left</span>: <span class="hljs-number">170px</span>;</span><br><span class="css">            <span class="hljs-attribute">right</span>: <span class="hljs-number">0px</span>;</span><br><span class="css">            <span class="hljs-attribute">height</span>: <span class="hljs-number">100%</span>;</span><br><span class="css"></span><br><span class="css">        &#125;</span><br><span class="css">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;app&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">router-view</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">router-view</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;temp1&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;login&quot;</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">h2</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;color: red;&quot;</span>&gt;</span>这是登陆页面.......<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">&quot;$router.replace(&#123;name:&#x27;adminIndex&#x27;&#125;)&quot;</span>&gt;</span>登录<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;temp2&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;adminIndex&quot;</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;left&quot;</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">&quot;$router.push(&#123;name:&#x27;stuList&#x27;&#125;)&quot;</span>&gt;</span>学生列表 <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">&quot;$router.push(&#123;name:&#x27;adminList&#x27;&#125;)&quot;</span>&gt;</span>管理员列表<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">&quot;$router.push(&#123;name:&#x27;login&#x27;&#125;)&quot;</span>&gt;</span>退出系统<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;right&quot;</span>&gt;</span><br>                <span class="hljs-comment">&lt;!-- 这个地方也要通过路由管理对象来控制</span><br><span class="hljs-comment">                    通过不同的路径显示不同的组件</span><br><span class="hljs-comment">                --&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">router-view</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">router-view</span>&gt;</span><br>            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span><br>    <span class="hljs-comment">&lt;!-- 学生列表 --&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;temp3&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>这是学生列表<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span><br>    <span class="hljs-comment">&lt;!-- 管理员列表  --&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;temp4&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>这是管理员列表<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./js/vue.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./js/vue-router.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    <span class="hljs-keyword">var</span> login = &#123;</span><br><span class="javascript">        <span class="hljs-attr">template</span>: <span class="hljs-string">&quot;#temp1&quot;</span></span><br><span class="javascript"></span><br><span class="javascript">    &#125;</span><br><span class="javascript">    <span class="hljs-keyword">var</span> adminIndex = &#123;</span><br><span class="javascript">        <span class="hljs-attr">template</span>: <span class="hljs-string">&quot;#temp2&quot;</span></span><br><span class="javascript">    &#125;</span><br><span class="javascript">    <span class="hljs-keyword">var</span> stuList = &#123;</span><br><span class="javascript">        <span class="hljs-attr">template</span>: <span class="hljs-string">&quot;#temp3&quot;</span></span><br><span class="javascript">    &#125;</span><br><span class="javascript">    <span class="hljs-keyword">var</span> adminList = &#123;</span><br><span class="javascript">        <span class="hljs-attr">template</span>: <span class="hljs-string">&quot;#temp4&quot;</span></span><br><span class="javascript">    &#125;</span><br><span class="javascript"></span><br><span class="javascript">    <span class="hljs-keyword">var</span> router = <span class="hljs-keyword">new</span> VueRouter(&#123;</span><br><span class="javascript">        <span class="hljs-attr">routes</span>: [&#123;</span><br><span class="javascript">            <span class="hljs-attr">path</span>: <span class="hljs-string">&quot;/&quot;</span>,</span><br><span class="javascript">            <span class="hljs-attr">redirect</span>: &#123;</span><br><span class="javascript">                <span class="hljs-attr">name</span>: <span class="hljs-string">&quot;login&quot;</span></span><br><span class="javascript">            &#125;</span><br><span class="javascript">        &#125;, &#123;</span><br><span class="javascript">            <span class="hljs-attr">path</span>: <span class="hljs-string">&quot;/login&quot;</span>,</span><br><span class="javascript">            <span class="hljs-attr">name</span>: <span class="hljs-string">&quot;login&quot;</span>,</span><br><span class="javascript">            <span class="hljs-attr">component</span>: login</span><br><span class="javascript">        &#125;, &#123;</span><br><span class="javascript">            <span class="hljs-attr">path</span>: <span class="hljs-string">&quot;/adminIndex&quot;</span>,</span><br><span class="javascript">            <span class="hljs-attr">name</span>: <span class="hljs-string">&quot;adminIndex&quot;</span>,</span><br><span class="javascript">            <span class="hljs-attr">component</span>: adminIndex,</span><br><span class="javascript">            <span class="hljs-attr">children</span>: [&#123;</span><br><span class="javascript">                <span class="hljs-attr">path</span>: <span class="hljs-string">&quot;stuList&quot;</span>,</span><br><span class="javascript">                <span class="hljs-attr">name</span>: <span class="hljs-string">&quot;stuList&quot;</span>,</span><br><span class="javascript">                <span class="hljs-attr">component</span>: stuList</span><br><span class="javascript">            &#125;, &#123;</span><br><span class="javascript">                <span class="hljs-attr">path</span>: <span class="hljs-string">&quot;adminList&quot;</span>,</span><br><span class="javascript">                <span class="hljs-attr">name</span>: <span class="hljs-string">&quot;adminList&quot;</span>,</span><br><span class="javascript">                <span class="hljs-attr">component</span>: adminList</span><br><span class="javascript">            &#125;]</span><br><span class="javascript">        &#125;]</span><br><span class="javascript">    &#125;)</span><br><span class="javascript">    <span class="hljs-keyword">new</span> Vue(&#123;</span><br><span class="javascript">        <span class="hljs-attr">el</span>: <span class="hljs-string">&quot;#app&quot;</span>,</span><br><span class="javascript">        router</span><br><span class="javascript">    &#125;)</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>

<blockquote>
<p><strong>注意事项</strong>：</p>
<ol>
<li>嵌套路由使用children来进行</li>
<li>嵌套路由的对象与之前的一级路由对象是同要的内部结构</li>
<li>嵌套路由的<code>path</code>最好不要加<code>/</code>，这样新生成的路径就会直接 在一级路径后面追加</li>
<li><code>router-view</code>不要忘记了</li>
</ol>
</blockquote>
<h2 id="4-vue过渡动画的使用"><a href="#4-vue过渡动画的使用" class="headerlink" title="4.vue过渡动画的使用"></a>4.vue过渡动画的使用</h2><h3 id="一、vue过渡动画transtion"><a href="#一、vue过渡动画transtion" class="headerlink" title="一、vue过渡动画transtion"></a>一、vue过渡动画transtion</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-meta-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;zh&quot;</span>&gt;</span><br><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">http-equiv</span>=<span class="hljs-string">&quot;X-UA-Compatible&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;IE=edge&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;viewport&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>vue的过渡动画<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="css"></span><br><span class="css">        <span class="hljs-selector-class">.box</span> &#123;</span><br><span class="css">            <span class="hljs-attribute">width</span>: <span class="hljs-number">200px</span>;</span><br><span class="css">            <span class="hljs-attribute">height</span>: <span class="hljs-number">200px</span>;</span><br><span class="css">            <span class="hljs-attribute">border</span>: <span class="hljs-number">2px</span> solid black;</span><br><span class="css">            <span class="hljs-attribute">background-color</span>: deeppink;</span><br><span class="css">        &#125;</span><br><span class="css">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;app&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">&quot;isShow=!isShow&quot;</span>&gt;</span>切换<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">v-show</span>=<span class="hljs-string">&quot;isShow&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;box&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./js/vue.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    <span class="hljs-keyword">new</span> Vue(&#123;</span><br><span class="javascript">        <span class="hljs-attr">el</span>: <span class="hljs-string">&quot;#app&quot;</span>,</span><br><span class="javascript">        <span class="hljs-attr">data</span>: &#123;</span><br><span class="javascript">            <span class="hljs-attr">isShow</span>: <span class="hljs-literal">true</span></span><br><span class="javascript">        &#125;</span><br><span class="javascript">    &#125;)</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>

<blockquote>
<p>在上面的代码不如，我们可以看到，当我们去改变<code>isShow</code>的时候， 盒子box在隐藏与显示，那么，我们能不能让这个盒子在隐藏与显示的时候执行一些特殊的动画效果呢？</p>
</blockquote>
<p>在vue的内部是可以直接进行的，vue的内部自带动画管理机制，在vue的内部是可以直接使用过渡的效果，它内部封装了一个<code>&lt;transition&gt;</code>的组件，可以让元素在<code>进入/离开</code>的时候执行特定的过渡效果</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">transition</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">v-show</span>=<span class="hljs-string">&quot;isShow&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;box&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">transition</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p>在上面的代码里面，我们将<code>box</code>使用<code>&lt;transition&gt;</code>进行包裹，box就可以执行动画了，但是我们并没有看到效果，原因是因为transiton的使用要进行相关的设置</p>
<p>box是需果隐藏与显示的，所以我们可以把这个盒子的隐藏与显示分为四个阶段，二个过程</p>
<ol>
<li>隐藏之前</li>
<li>隐藏之后</li>
<li>显示之前</li>
<li>显示之后</li>
</ol>
<img src="https://pic.imgdb.cn/item/619250e12ab3f51d9134b6b4.png" srcset="/blog/img/loading.gif" lazyload style="zoom:50%">

<p>上面就是vue中<code>&lt;transition&gt;</code>的过渡图，然后我们根据图片上面的提示得到了上面的代码</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-meta-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;zh&quot;</span>&gt;</span><br><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">http-equiv</span>=<span class="hljs-string">&quot;X-UA-Compatible&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;IE=edge&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;viewport&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>vue的过渡动画<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="css"></span><br><span class="css">        <span class="hljs-selector-class">.box</span> &#123;</span><br><span class="css">            <span class="hljs-attribute">width</span>: <span class="hljs-number">200px</span>;</span><br><span class="css">            <span class="hljs-attribute">height</span>: <span class="hljs-number">200px</span>;</span><br><span class="css">            <span class="hljs-attribute">border</span>: <span class="hljs-number">2px</span> solid black;</span><br><span class="css">            <span class="hljs-attribute">background-color</span>: deeppink;</span><br><span class="css">        &#125;</span><br><span class="css">        <span class="hljs-comment">/* 假设现在我们希望这个盒子在这里执行的是淡入淡出 */</span></span><br><span class="css">        <span class="hljs-comment">/* 离开之前 */</span></span><br><span class="css">        <span class="hljs-selector-class">.fade-leave</span>&#123;</span><br><span class="css">            <span class="hljs-attribute">opacity</span>: <span class="hljs-number">1</span>;</span><br><span class="css">        &#125;</span><br><span class="css">        <span class="hljs-comment">/* 离开以后 */</span></span><br><span class="css">        <span class="hljs-selector-class">.fade-leave-to</span>&#123;</span><br><span class="css">            <span class="hljs-attribute">opacity</span>: <span class="hljs-number">0</span>;</span><br><span class="css">        &#125;</span><br><span class="css">        <span class="hljs-comment">/* 进入之前 */</span></span><br><span class="css">        <span class="hljs-selector-class">.fade-enter</span>&#123;</span><br><span class="css">            <span class="hljs-attribute">opacity</span>: <span class="hljs-number">0</span>;</span><br><span class="css">        &#125;</span><br><span class="css">        <span class="hljs-comment">/* 进入以后 */</span></span><br><span class="css">        <span class="hljs-selector-class">.fade-enter-to</span>&#123;</span><br><span class="css">            <span class="hljs-attribute">opacity</span>: <span class="hljs-number">1</span>;</span><br><span class="css">        &#125;</span><br><span class="css">        <span class="hljs-comment">/* 进入的过程 */</span></span><br><span class="css">        <span class="hljs-selector-class">.fade-enter-active</span>&#123;</span><br><span class="css">            <span class="hljs-attribute">transition</span>: all <span class="hljs-number">1s</span> linear;</span><br><span class="css">        &#125;</span><br><span class="css">        <span class="hljs-comment">/* 离开的过程 */</span></span><br><span class="css">        <span class="hljs-selector-class">.fade-leave-active</span>&#123;</span><br><span class="css">            <span class="hljs-attribute">transition</span>: all <span class="hljs-number">1s</span> linear;</span><br><span class="css">        &#125;</span><br><span class="css">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;app&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">&quot;isShow=!isShow&quot;</span>&gt;</span>切换<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">transition</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;fade&quot;</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">v-show</span>=<span class="hljs-string">&quot;isShow&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;box&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">transition</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./js/vue.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    <span class="hljs-keyword">new</span> Vue(&#123;</span><br><span class="javascript">        <span class="hljs-attr">el</span>: <span class="hljs-string">&quot;#app&quot;</span>,</span><br><span class="javascript">        <span class="hljs-attr">data</span>: &#123;</span><br><span class="javascript">            <span class="hljs-attr">isShow</span>: <span class="hljs-literal">true</span></span><br><span class="javascript">        &#125;</span><br><span class="javascript">    &#125;)</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p>在上面的代码里面，我们可以将CSS进行简化</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-comment">/* 假设现在我们希望这个盒子在这里执行的是淡入淡出 */</span><br><span class="hljs-comment">/* 进入之前,离开以后 */</span><br><span class="hljs-selector-class">.fade-enter</span>,<br><span class="hljs-selector-class">.fade-leave-to</span> &#123;<br>    <span class="hljs-attribute">opacity</span>: <span class="hljs-number">0</span>;<br>&#125;<br><br><span class="hljs-comment">/* 离开之前,进入以后 */</span><br><span class="hljs-selector-class">.fade-levae</span>,<span class="hljs-selector-class">.fade-enter-to</span>&#123;<br>    <span class="hljs-attribute">opacity</span>: <span class="hljs-number">1</span>;<br>&#125;<br><span class="hljs-comment">/* 进入的过程,离开的过程 */</span><br><span class="hljs-selector-class">.fade-enter-active</span>,<span class="hljs-selector-class">.fade-leave-active</span>&#123;<br>    <span class="hljs-attribute">transition</span>: all <span class="hljs-number">1s</span> linear;<br>&#125;<br></code></pre></td></tr></table></figure>

<ol>
<li><code>v-enter</code>代表进入之前</li>
<li><code>v-enter-to</code>代表进入以后</li>
<li><code>v-leave</code>代表离开以前</li>
<li><code>v-leave-to</code>代表离开以后</li>
</ol>
<p>而上面的4个状态会形成2个过程，分别是进入的过程与离开的过程</p>
<ol>
<li><code>v-enter-active</code>进入的过程</li>
<li><code>v-leave-active</code>离开的过程</li>
</ol>
<p>前面的<code>v</code>指的是在<code>&lt;transition&gt;</code>组件上面的<code>name</code>属性值</p>
<hr>
<h3 id="二、多元素同时执行过渡动画transition-group"><a href="#二、多元素同时执行过渡动画transition-group" class="headerlink" title="二、多元素同时执行过渡动画transition-group"></a>二、多元素同时执行过渡动画transition-group</h3><p>如果需要在多个元素上面同时执行过渡效果，则需要使用<code>&lt;transitoin-group&gt;</code></p>
<p>在这里还有一个小小的注意事项，如果有多个组件同时执行过的时候，则要使用<code>&lt;transition-group&gt;</code>去实现</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">transition-group</span> <span class="hljs-attr">tag</span>=<span class="hljs-string">&quot;div&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;img-box&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">v-show</span>=<span class="hljs-string">&quot;currentIndex==0&quot;</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./img/item1.jpg&quot;</span> <span class="hljs-attr">:key</span>=<span class="hljs-string">&quot;0&quot;</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">&quot;&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">v-show</span>=<span class="hljs-string">&quot;currentIndex==1&quot;</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./img/item2.jpg&quot;</span> <span class="hljs-attr">:key</span>=<span class="hljs-string">&quot;1&quot;</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">&quot;&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">v-show</span>=<span class="hljs-string">&quot;currentIndex==2&quot;</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./img/item3.jpg&quot;</span> <span class="hljs-attr">:key</span>=<span class="hljs-string">&quot;2&quot;</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">&quot;&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">v-show</span>=<span class="hljs-string">&quot;currentIndex==3&quot;</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./img/item4.jpg&quot;</span> <span class="hljs-attr">:key</span>=<span class="hljs-string">&quot;3&quot;</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">&quot;&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">transition-group</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p><code>&lt;transition-group&gt;</code>默认情况下会帮我们生成一个<code>span</code>标签，但是我们仍然可以通过设置<code>tag</code>来生成指定的标签</p>
<p><strong>transition案例</strong></p>
<p>我们现在使用<code>transition</code>来完成一组左右切换的过程，这个过程后期会有项目当中的页面切换里面去使用</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-meta-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;zh&quot;</span>&gt;</span><br><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">http-equiv</span>=<span class="hljs-string">&quot;X-UA-Compatible&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;IE=edge&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;viewport&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>vue的过渡动画<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="css"></span><br><span class="css">        <span class="hljs-selector-class">.img-box</span> &#123;</span><br><span class="css">            <span class="hljs-attribute">width</span>: <span class="hljs-number">639px</span>;</span><br><span class="css">            <span class="hljs-attribute">height</span>: <span class="hljs-number">426px</span>;</span><br><span class="css">            <span class="hljs-attribute">border</span>: <span class="hljs-number">2px</span> solid black;</span><br><span class="css">            <span class="hljs-attribute">position</span>: relative;</span><br><span class="css">        &#125;</span><br><span class="css"></span><br><span class="css">        <span class="hljs-selector-class">.img-box</span>&gt;<span class="hljs-selector-tag">img</span> &#123;</span><br><span class="css">            <span class="hljs-attribute">position</span>: absolute;</span><br><span class="css">            <span class="hljs-attribute">left</span>: <span class="hljs-number">0px</span>;</span><br><span class="css">            <span class="hljs-attribute">top</span>: <span class="hljs-number">0px</span>;</span><br><span class="css">        &#125;</span><br><span class="css"></span><br><span class="css">        <span class="hljs-comment">/* 编写vue的过滤动画  */</span></span><br><span class="css">        <span class="hljs-comment">/* 进入之前,离开以后 */</span></span><br><span class="css">        <span class="hljs-selector-class">.fade-enter</span>,</span><br><span class="css">        <span class="hljs-selector-class">.fade-leave-to</span> &#123;</span><br><span class="css">            <span class="hljs-attribute">opacity</span>: <span class="hljs-number">0</span>;</span><br><span class="css">        &#125;</span><br><span class="css">        <span class="hljs-comment">/* 进入之后,离开之前 */</span></span><br><span class="css">        <span class="hljs-selector-class">.fade-enter-to</span>,<span class="hljs-selector-class">.fade-leave</span>&#123;</span><br><span class="css">            <span class="hljs-attribute">opacity</span>: <span class="hljs-number">1</span>;</span><br><span class="css">        &#125;</span><br><span class="css">        <span class="hljs-selector-class">.fade-enter-active</span>,<span class="hljs-selector-class">.fade-leave-active</span>&#123;</span><br><span class="css">            <span class="hljs-attribute">transition</span>: all <span class="hljs-number">0.5s</span> linear;</span><br><span class="css">        &#125;</span><br><span class="css">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;app&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">transition-group</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;fade&quot;</span> <span class="hljs-attr">tag</span>=<span class="hljs-string">&quot;div&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;img-box&quot;</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">v-show</span>=<span class="hljs-string">&quot;currentIndex==index&quot;</span> <span class="hljs-attr">:src</span>=<span class="hljs-string">&quot;item&quot;</span> <span class="hljs-attr">v-for</span>=<span class="hljs-string">&quot;(item,index) in imgList&quot;</span> <span class="hljs-attr">:key</span>=<span class="hljs-string">&quot;index&quot;</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">&quot;&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">transition-group</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">&quot;currentIndex--&quot;</span>&gt;</span><br>            &lt;--前<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">&quot;currentIndex++&quot;</span>&gt;</span>后--&gt;<br>        <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./js/vue.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    <span class="hljs-keyword">new</span> Vue(&#123;</span><br><span class="javascript">        <span class="hljs-attr">el</span>: <span class="hljs-string">&quot;#app&quot;</span>,</span><br><span class="javascript">        <span class="hljs-attr">data</span>: &#123;</span><br><span class="javascript">            <span class="hljs-attr">currentIndex</span>: <span class="hljs-number">0</span>,</span><br><span class="javascript">            <span class="hljs-attr">imgList</span>: [</span><br><span class="javascript">                <span class="hljs-string">&quot;./img/item1.jpg&quot;</span>,</span><br><span class="javascript">                <span class="hljs-string">&quot;./img/item2.jpg&quot;</span>,</span><br><span class="javascript">                <span class="hljs-string">&quot;./img/item3.jpg&quot;</span>,</span><br><span class="javascript">                <span class="hljs-string">&quot;./img/item4.jpg&quot;</span></span><br><span class="javascript">            ]</span><br><span class="javascript">        &#125;,</span><br><span class="javascript">        <span class="hljs-attr">watch</span>: &#123;</span><br><span class="javascript">            <span class="hljs-function"><span class="hljs-title">currentIndex</span>(<span class="hljs-params">newValue, oldValue</span>)</span> &#123;</span><br><span class="javascript">                <span class="hljs-keyword">if</span> (newValue &gt; <span class="hljs-number">3</span>) &#123;</span><br><span class="javascript">                    <span class="hljs-built_in">this</span>.currentIndex = <span class="hljs-number">0</span>;</span><br><span class="javascript">                &#125; <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (newValue &lt; <span class="hljs-number">0</span>) &#123;</span><br><span class="javascript">                    <span class="hljs-built_in">this</span>.currentIndex = <span class="hljs-number">3</span>;</span><br><span class="javascript">                &#125;</span><br><span class="javascript">            &#125;</span><br><span class="javascript">        &#125;</span><br><span class="javascript">    &#125;)</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>

<blockquote>
<p>在上面的代码里同，我们通过最基本的transition-group实现了淡入淡出的轮播图效果</p>
</blockquote>
<h3 id="案例"><a href="#案例" class="headerlink" title="案例"></a>案例</h3><p>通过vue的过渡动画，实现一个滚动的轮播效果</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-meta-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;zh&quot;</span>&gt;</span><br><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">http-equiv</span>=<span class="hljs-string">&quot;X-UA-Compatible&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;IE=edge&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;viewport&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>vue的过渡动画<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="css"></span><br><span class="css">        <span class="hljs-selector-class">.img-box</span> &#123;</span><br><span class="css">            <span class="hljs-attribute">width</span>: <span class="hljs-number">639px</span>;</span><br><span class="css">            <span class="hljs-attribute">height</span>: <span class="hljs-number">426px</span>;</span><br><span class="css">            <span class="hljs-attribute">border</span>: <span class="hljs-number">2px</span> solid black;</span><br><span class="css">            <span class="hljs-attribute">position</span>: relative;</span><br><span class="css">            <span class="hljs-attribute">overflow</span>: hidden;</span><br><span class="css">        &#125;</span><br><span class="css"></span><br><span class="css">        <span class="hljs-selector-class">.img-box</span>&gt;<span class="hljs-selector-tag">img</span> &#123;</span><br><span class="css">            <span class="hljs-attribute">position</span>: absolute;</span><br><span class="css">            <span class="hljs-attribute">left</span>: <span class="hljs-number">0px</span>;</span><br><span class="css">            <span class="hljs-attribute">top</span>: <span class="hljs-number">0px</span>;</span><br><span class="css">        &#125;</span><br><span class="css"></span><br><span class="css">        <span class="hljs-comment">/* 第一组效果，从右向左  */</span></span><br><span class="css">        <span class="hljs-comment">/* 进入之前 */</span></span><br><span class="css">        <span class="hljs-selector-class">.slide-left-enter</span> &#123;</span><br><span class="css">            <span class="hljs-attribute">transform</span>: <span class="hljs-built_in">translateX</span>(<span class="hljs-number">100%</span>);</span><br><span class="css">        &#125;</span><br><span class="css"></span><br><span class="css">        <span class="hljs-selector-class">.slide-left-enter-to</span>,</span><br><span class="css">        <span class="hljs-selector-class">.slide-left-leave</span> &#123;</span><br><span class="css">            <span class="hljs-attribute">transform</span>: <span class="hljs-built_in">translateX</span>(<span class="hljs-number">0</span>);</span><br><span class="css">        &#125;</span><br><span class="css"></span><br><span class="css">        <span class="hljs-comment">/* 离开以后 */</span></span><br><span class="css">        <span class="hljs-selector-class">.slide-left-leave-to</span> &#123;</span><br><span class="css">            <span class="hljs-attribute">transform</span>: <span class="hljs-built_in">translateX</span>(-<span class="hljs-number">100%</span>);</span><br><span class="css">        &#125;</span><br><span class="css"></span><br><span class="css">        <span class="hljs-selector-class">.slide-left-enter-active</span>,</span><br><span class="css">        <span class="hljs-selector-class">.slide-left-leave-active</span> &#123;</span><br><span class="css">            <span class="hljs-attribute">transition</span>: all <span class="hljs-number">0.5s</span> linear;</span><br><span class="css">        &#125;</span><br><span class="css"></span><br><span class="css">        <span class="hljs-comment">/* 第二组效果 从左向右*/</span></span><br><span class="css">        <span class="hljs-selector-class">.slide-right-enter</span>&#123;</span><br><span class="css">            <span class="hljs-attribute">transform</span>: <span class="hljs-built_in">translateX</span>(-<span class="hljs-number">100%</span>);</span><br><span class="css">        &#125;</span><br><span class="css">        <span class="hljs-selector-class">.slide-right-enter-to</span>,</span><br><span class="css">        <span class="hljs-selector-class">.slide-right-leave</span>&#123;</span><br><span class="css">            <span class="hljs-attribute">transform</span>: <span class="hljs-built_in">translateX</span>(<span class="hljs-number">0</span>);</span><br><span class="css">        &#125;</span><br><span class="css">        <span class="hljs-selector-class">.slide-right-leave-to</span>&#123;</span><br><span class="css">            <span class="hljs-attribute">transform</span>: <span class="hljs-built_in">translateX</span>(<span class="hljs-number">100%</span>);</span><br><span class="css">        &#125;</span><br><span class="css">        <span class="hljs-selector-class">.slide-right-enter-active</span>,</span><br><span class="css">        <span class="hljs-selector-class">.slide-right-leave-active</span> &#123;</span><br><span class="css">            <span class="hljs-attribute">transition</span>: all <span class="hljs-number">0.5s</span> linear;</span><br><span class="css">        &#125;</span><br><span class="css"></span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;app&quot;</span>&gt;</span><br>        <span class="hljs-comment">&lt;!--这里的name由一个固定的值变成了一个动态的值 --&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">transition-group</span> <span class="hljs-attr">:name</span>=<span class="hljs-string">&quot;dir&quot;</span> <span class="hljs-attr">tag</span>=<span class="hljs-string">&quot;div&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;img-box&quot;</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">v-show</span>=<span class="hljs-string">&quot;currentIndex==index&quot;</span> <span class="hljs-attr">:src</span>=<span class="hljs-string">&quot;item&quot;</span> <span class="hljs-attr">v-for</span>=<span class="hljs-string">&quot;(item,index) in imgList&quot;</span> <span class="hljs-attr">:key</span>=<span class="hljs-string">&quot;index&quot;</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">&quot;&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">transition-group</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">&quot;dir=&#x27;slide-right&#x27;;currentIndex--&quot;</span>&gt;</span><br>           &lt;--左箭头<br>        <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">&quot;dir=&#x27;slide-left&#x27;;currentIndex++&quot;</span>&gt;</span><br>            右箭头--&gt;<br>        <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./js/vue.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    <span class="hljs-keyword">new</span> Vue(&#123;</span><br><span class="javascript">        <span class="hljs-attr">el</span>: <span class="hljs-string">&quot;#app&quot;</span>,</span><br><span class="javascript">        <span class="hljs-attr">data</span>: &#123;</span><br><span class="javascript">            <span class="hljs-attr">currentIndex</span>: <span class="hljs-number">0</span>,</span><br><span class="javascript">            <span class="hljs-attr">imgList</span>: [</span><br><span class="javascript">                <span class="hljs-string">&quot;./img/item1.jpg&quot;</span>,</span><br><span class="javascript">                <span class="hljs-string">&quot;./img/item2.jpg&quot;</span>,</span><br><span class="javascript">                <span class="hljs-string">&quot;./img/item3.jpg&quot;</span>,</span><br><span class="javascript">                <span class="hljs-string">&quot;./img/item4.jpg&quot;</span></span><br><span class="javascript">            ],</span><br><span class="javascript">            <span class="hljs-attr">dir</span>:<span class="hljs-string">&quot;slide-left&quot;</span></span><br><span class="javascript">        &#125;,</span><br><span class="javascript">        <span class="hljs-attr">watch</span>: &#123;</span><br><span class="javascript">            <span class="hljs-function"><span class="hljs-title">currentIndex</span>(<span class="hljs-params">newValue, oldValue</span>)</span> &#123;</span><br><span class="javascript">                <span class="hljs-keyword">if</span> (newValue &gt; <span class="hljs-number">3</span>) &#123;</span><br><span class="javascript">                    <span class="hljs-built_in">this</span>.currentIndex = <span class="hljs-number">0</span>;</span><br><span class="javascript">                &#125; <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (newValue &lt; <span class="hljs-number">0</span>) &#123;</span><br><span class="javascript">                    <span class="hljs-built_in">this</span>.currentIndex = <span class="hljs-number">3</span>;</span><br><span class="javascript">                &#125;</span><br><span class="javascript">            &#125;</span><br><span class="javascript">        &#125;</span><br><span class="javascript">    &#125;)</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>

<h3 id="三、transition的钩子函数"><a href="#三、transition的钩子函数" class="headerlink" title="三、transition的钩子函数"></a>三、transition的钩子函数</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">transition</span></span><br><span class="hljs-tag">  @<span class="hljs-attr">before-enter</span>=<span class="hljs-string">&quot;beforeEnter&quot;</span></span><br><span class="hljs-tag">  @<span class="hljs-attr">enter</span>=<span class="hljs-string">&quot;enter&quot;</span></span><br><span class="hljs-tag">  @<span class="hljs-attr">after-enter</span>=<span class="hljs-string">&quot;afterEnter&quot;</span></span><br><span class="hljs-tag">  @<span class="hljs-attr">enter-cancelled</span>=<span class="hljs-string">&quot;enterCancelled&quot;</span></span><br><span class="hljs-tag"></span><br><span class="hljs-tag">  @<span class="hljs-attr">before-leave</span>=<span class="hljs-string">&quot;beforeLeave&quot;</span></span><br><span class="hljs-tag">  @<span class="hljs-attr">leave</span>=<span class="hljs-string">&quot;leave&quot;</span></span><br><span class="hljs-tag">  @<span class="hljs-attr">after-leave</span>=<span class="hljs-string">&quot;afterLeave&quot;</span></span><br><span class="hljs-tag">  @<span class="hljs-attr">leave-cancelled</span>=<span class="hljs-string">&quot;leaveCancelled&quot;</span></span><br><span class="hljs-tag">&gt;</span><br>  <span class="hljs-comment">&lt;!-- ... --&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">transition</span>&gt;</span><br></code></pre></td></tr></table></figure>



<h3 id="四、总结"><a href="#四、总结" class="headerlink" title="四、总结"></a>四、总结</h3><p>在vue的内部，有一些自带的组件</p>
<ol>
<li><code>router-link</code>跳转页面</li>
<li><code>router-view</code>根据路径显示页面</li>
<li><code>transitioin</code>执行单个元素的过渡动画</li>
<li><code>transition-group</code>执行多个元素以的过渡动画</li>
</ol>
<h4 id="关于过渡的总结"><a href="#关于过渡的总结" class="headerlink" title="关于过渡的总结"></a>关于过渡的总结</h4><ol>
<li>2个过程，进入的过程<code>enter-active</code>，离开的过程<code>leave-actkve</code></li>
<li>4个状态，进入之前<code>enter</code>，进入之后<code>enter-to</code>，离开之前<code>leave</code>,离开之后<code>leave-to</code></li>
<li>多个元素一定要使用<code>transition-group</code>，要在子元素上面指定<code>key</code></li>
<li><code>transform-group</code>默认生成的是<code>span</code>标签，如果希望生成其它的标签，可以使用<code>tag</code> </li>
</ol>
<h3 id="五、补充Animate-css的使用"><a href="#五、补充Animate-css的使用" class="headerlink" title="五、补充Animate.css的使用"></a>五、补充Animate.css的使用</h3><p>在现在框架里面，有很多第三方的动画库，我们常用的一个动画库是<code>animate.css</code>，这个动画库可以与vue进行完美的结合</p>
<ol>
<li><p>安装</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs bash">$ yarn add animate.css<br></code></pre></td></tr></table></figure>
</li>
<li><p>导入到系统当中</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">&quot;stylesheet&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;./css/animate.css&quot;</span>&gt;</span><br></code></pre></td></tr></table></figure>
</li>
<li><p>使用</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs html"> <span class="hljs-tag">&lt;<span class="hljs-name">transition-group</span></span><br><span class="hljs-tag">                   <span class="hljs-attr">enter-active-class</span>=<span class="hljs-string">&quot;animate__animated animate__bounceInRight&quot;</span></span><br><span class="hljs-tag">                   <span class="hljs-attr">leave-active-class</span>=<span class="hljs-string">&quot;animate__animated animate__rotateOutUpLeft&quot;</span></span><br><span class="hljs-tag">                   <span class="hljs-attr">tag</span>=<span class="hljs-string">&quot;div&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;img-box&quot;</span>&gt;</span><br>     <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">v-show</span>=<span class="hljs-string">&quot;currentIndex==index&quot;</span> <span class="hljs-attr">:src</span>=<span class="hljs-string">&quot;item&quot;</span> <span class="hljs-attr">v-for</span>=<span class="hljs-string">&quot;(item,index) in imgList&quot;</span> <span class="hljs-attr">:key</span>=<span class="hljs-string">&quot;index&quot;</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">&quot;&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">transition-group</span>&gt;</span><br></code></pre></td></tr></table></figure>



</li>
</ol>
<h2 id="5-vue框架中的key详解"><a href="#5-vue框架中的key详解" class="headerlink" title="5.vue框架中的key详解"></a>5.vue框架中的key详解</h2><p>在之前进行列表渲染的时候，还有现在进行过渡动画的时候，我们在里面都看到了一个<code>key</code>。之前给同学样去给同学样讲解<code>key</code>的时候，这个东西不能重复，所以我们一般都会使用索引来进行</p>
<h3 id="不推荐使用index做key"><a href="#不推荐使用index做key" class="headerlink" title="不推荐使用index做key"></a>不推荐使用index做key</h3><blockquote>
<p>如果执行是静态渲染，则使用<code>index</code>做为key无可厚非，如果执行的是动态的渲染，则<code>index</code>千万不能做为key,否则vue内部的状态机就容易出错</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;app&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">ul</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">v-for</span>=<span class="hljs-string">&quot;(item,index) in stuList&quot;</span> <span class="hljs-attr">:key</span>=<span class="hljs-string">&quot;index&quot;</span>&gt;</span><br>                学号：&#123;&#123;item.sid&#125;&#125;---姓名：&#123;&#123;item.sname&#125;&#125;<br>            <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./js/vue.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    <span class="hljs-keyword">new</span> Vue(&#123;</span><br><span class="javascript">        <span class="hljs-attr">el</span>:<span class="hljs-string">&quot;#app&quot;</span>,</span><br><span class="javascript">        <span class="hljs-attr">data</span>:&#123;</span><br><span class="javascript">            <span class="hljs-attr">stuList</span>:[</span><br><span class="javascript">                &#123;<span class="hljs-attr">sid</span>:<span class="hljs-string">&quot;H1001&quot;</span>,<span class="hljs-attr">sname</span>:<span class="hljs-string">&quot;张珊&quot;</span>&#125;,</span><br><span class="javascript">                &#123;<span class="hljs-attr">sid</span>:<span class="hljs-string">&quot;H1002&quot;</span>,<span class="hljs-attr">sname</span>:<span class="hljs-string">&quot;李四&quot;</span>&#125;,</span><br><span class="javascript">                &#123;<span class="hljs-attr">sid</span>:<span class="hljs-string">&quot;H1003&quot;</span>,<span class="hljs-attr">sname</span>:<span class="hljs-string">&quot;王五&quot;</span>&#125;,</span><br><span class="javascript">            ]</span><br><span class="javascript">        &#125;</span><br><span class="javascript">    &#125;)</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p>这就是一个表态渲染，因为数组<code>stuList</code>后面不会发生改变了</p>
<p><strong>存在的问题</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;app&quot;</span>&gt;</span><br>        学号:<span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text&quot;</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">&quot;sid&quot;</span>&gt;</span><br>        姓名:<span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text&quot;</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">&quot;sname&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">&quot;addData&quot;</span>&gt;</span>添加<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">ul</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">v-for</span>=<span class="hljs-string">&quot;(item,index) in stuList&quot;</span> <span class="hljs-attr">:key</span>=<span class="hljs-string">&quot;index&quot;</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;checkbox&quot;</span>&gt;</span><br>                学号：&#123;&#123;item.sid&#125;&#125;---姓名：&#123;&#123;item.sname&#125;&#125;<br>            <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./js/vue.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    <span class="hljs-keyword">new</span> Vue(&#123;</span><br><span class="javascript">        <span class="hljs-attr">el</span>: <span class="hljs-string">&quot;#app&quot;</span>,</span><br><span class="javascript">        <span class="hljs-attr">data</span>: &#123;</span><br><span class="javascript">            <span class="hljs-attr">sid</span>: <span class="hljs-string">&quot;&quot;</span>,</span><br><span class="javascript">            <span class="hljs-attr">sname</span>: <span class="hljs-string">&quot;&quot;</span>,</span><br><span class="javascript">            <span class="hljs-attr">stuList</span>: [&#123;</span><br><span class="javascript">                    <span class="hljs-attr">sid</span>: <span class="hljs-string">&quot;H1001&quot;</span>,</span><br><span class="javascript">                    <span class="hljs-attr">sname</span>: <span class="hljs-string">&quot;张珊&quot;</span></span><br><span class="javascript">                &#125;,</span><br><span class="javascript">                &#123;</span><br><span class="javascript">                    <span class="hljs-attr">sid</span>: <span class="hljs-string">&quot;H1002&quot;</span>,</span><br><span class="javascript">                    <span class="hljs-attr">sname</span>: <span class="hljs-string">&quot;李四&quot;</span></span><br><span class="javascript">                &#125;,</span><br><span class="javascript">                &#123;</span><br><span class="javascript">                    <span class="hljs-attr">sid</span>: <span class="hljs-string">&quot;H1003&quot;</span>,</span><br><span class="javascript">                    <span class="hljs-attr">sname</span>: <span class="hljs-string">&quot;王五&quot;</span></span><br><span class="javascript">                &#125;,</span><br><span class="javascript">            ]</span><br><span class="javascript">        &#125;,</span><br><span class="javascript">        <span class="hljs-attr">methods</span>: &#123;</span><br><span class="javascript">            <span class="hljs-function"><span class="hljs-title">addData</span>(<span class="hljs-params"></span>)</span> &#123;</span><br><span class="javascript">                <span class="hljs-built_in">this</span>.stuList.unshift(&#123;</span><br><span class="javascript">                    <span class="hljs-attr">sid</span>: <span class="hljs-built_in">this</span>.sid,</span><br><span class="javascript">                    <span class="hljs-attr">sname</span>: <span class="hljs-built_in">this</span>.sname</span><br><span class="javascript">                &#125;);</span><br><span class="javascript">                <span class="hljs-built_in">this</span>.sid = <span class="hljs-string">&quot;&quot;</span>;</span><br><span class="javascript">                <span class="hljs-built_in">this</span>.sname = <span class="hljs-string">&quot;&quot;</span>;</span><br><span class="javascript">            &#125;</span><br><span class="javascript">        &#125;</span><br><span class="javascript">    &#125;)</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p><strong>添加数据之前</strong></p>
<p><img src="https://pic.imgdb.cn/item/619251b12ab3f51d9134fb8b.png" srcset="/blog/img/loading.gif" lazyload alt="image-20211115155849158"></p>
<p><strong>添加数据的时候</strong></p>
<p><img src="https://pic.imgdb.cn/item/619251c42ab3f51d91350393.png" srcset="/blog/img/loading.gif" lazyload alt="image-20211115155917611"></p>
<p><strong>添加完成的时候</strong></p>
<p><img src="https://pic.imgdb.cn/item/619251c42ab3f51d913503af.png" srcset="/blog/img/loading.gif" lazyload alt="image-20211115155933868"></p>
<p>这个时候发现原本应该是“李四”这一项被钩选，结果现在变成了“张三”。原因？？？？？？</p>
<p>在vue的内部，vue是通过key来控制状态的，而我们在渲染的时候是通过</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs html"> <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">v-for</span>=<span class="hljs-string">&quot;(item,index) in stuList&quot;</span> <span class="hljs-attr">:key</span>=<span class="hljs-string">&quot;index&quot;</span>&gt;</span><br>     <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;checkbox&quot;</span>&gt;</span><br>     学号：&#123;&#123;item.sid&#125;&#125;---姓名：&#123;&#123;item.sname&#125;&#125;<br><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p>我们的内部使用索引做了key ，所以在变化之前，vue记住了是<code>key</code>为1 的这一项被钩选了，然后再下次重新渲染的时候，渲染完成以后，它还会将<code>key</code>为1的钩选，但是这个时候，发现key已经变了</p>
<p><img src="https://pic.imgdb.cn/item/619251e72ab3f51d9135133e.png" srcset="/blog/img/loading.gif" lazyload alt="image-20211115160142282"> </p>
<hr>
<p>vue在执行内部渲染的时候，使用了一种叫<code>diff </code>的算法，它把渲染之前和渲染之后的数据进行对比，然后只更改差异项</p>
<p><img src="https://pic.imgdb.cn/item/619251fd2ab3f51d91351aab.png" srcset="/blog/img/loading.gif" lazyload alt="image-20211115160823114"></p>
<p>vue的内部是将渲染之前的数据与渲染之后的数据进行对比，这个时候对比依据就是key </p>
<p>它在执行对比的时候，发现每个key 都改变了，它又重新渲染了4个，但是本应该只渲染1次，上面的代码就极大的消耗了浏览器的性能，所以如果执行的是动态渲染，我们不推荐使用<code>index</code>做key</p>
<h3 id="解决方法"><a href="#解决方法" class="headerlink" title="解决方法"></a>解决方法</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">v-for</span>=<span class="hljs-string">&quot;(item,index) in stuList&quot;</span> <span class="hljs-attr">:key</span>=<span class="hljs-string">&quot;item.sid&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;checkbox&quot;</span>&gt;</span><br>    学号：&#123;&#123;item.sid&#125;&#125;---姓名：&#123;&#123;item.sname&#125;&#125;<br><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p><img src="https://pic.imgdb.cn/item/619252122ab3f51d9135216c.png" srcset="/blog/img/loading.gif" lazyload alt="image-20211115161350970"></p>
<p>我们现在再来看一下vue是怎么执行的内部对比</p>
<p><img src="https://pic.imgdb.cn/item/619252282ab3f51d9135274a.png" srcset="/blog/img/loading.gif" lazyload alt="image-20211115161740204"></p>
<p>这个时候 vue在内部进行对比的时候，发现后面三项都没有变，只有前面多了一项，所以在渲染的时候也仅仅只会更改最前面的一项，这样效率非常高，也答会我们的数据驱动页面的本质</p>
<h3 id="案例-1"><a href="#案例-1" class="headerlink" title="案例"></a>案例</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-meta-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;zh&quot;</span>&gt;</span><br><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">http-equiv</span>=<span class="hljs-string">&quot;X-UA-Compatible&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;IE=edge&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;viewport&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>transition中key<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="css"></span><br><span class="css">        <span class="hljs-selector-class">.list-box</span> &#123;</span><br><span class="css">            <span class="hljs-attribute">list-style-type</span>: none;</span><br><span class="css">            <span class="hljs-attribute">margin</span>: <span class="hljs-number">0</span>;</span><br><span class="css">            <span class="hljs-attribute">padding</span>: <span class="hljs-number">0</span>;</span><br><span class="css">            <span class="hljs-attribute">display</span>: flex;</span><br><span class="css">        &#125;</span><br><span class="css"></span><br><span class="css">        <span class="hljs-selector-class">.list-box</span>&gt;<span class="hljs-selector-tag">li</span> &#123;</span><br><span class="css">            <span class="hljs-attribute">width</span>: <span class="hljs-number">40px</span>;</span><br><span class="css">            <span class="hljs-attribute">height</span>: <span class="hljs-number">40px</span>;</span><br><span class="css">            <span class="hljs-attribute">background-color</span>: lightseagreen;</span><br><span class="css">            <span class="hljs-attribute">margin</span>: <span class="hljs-number">5px</span>;</span><br><span class="css">            <span class="hljs-attribute">display</span>: flex;</span><br><span class="css">            <span class="hljs-attribute">justify-content</span>: center;</span><br><span class="css">            <span class="hljs-attribute">align-items</span>: center;</span><br><span class="css">        &#125;</span><br><span class="css"></span><br><span class="css">        <span class="hljs-selector-class">.aaa-enter</span> &#123;</span><br><span class="css">            <span class="hljs-attribute">transform</span>: <span class="hljs-built_in">translateY</span>(-<span class="hljs-number">150%</span>);</span><br><span class="css">            <span class="hljs-attribute">opacity</span>: <span class="hljs-number">0</span>;</span><br><span class="css">        &#125;</span><br><span class="css"></span><br><span class="css">        <span class="hljs-selector-class">.aaa-enter-to</span>,</span><br><span class="css">        <span class="hljs-selector-class">.aaa-leave</span> &#123;</span><br><span class="css">            <span class="hljs-attribute">transform</span>: <span class="hljs-built_in">translateY</span>(<span class="hljs-number">0</span>);</span><br><span class="css">            <span class="hljs-attribute">opacity</span>: <span class="hljs-number">1</span>;</span><br><span class="css">        &#125;</span><br><span class="css"></span><br><span class="css">        <span class="hljs-selector-class">.aaa-leave-to</span> &#123;</span><br><span class="css">            <span class="hljs-attribute">opacity</span>: <span class="hljs-number">0</span>;</span><br><span class="css">            <span class="hljs-attribute">transform</span>: <span class="hljs-built_in">translateY</span>(<span class="hljs-number">150%</span>);</span><br><span class="css">        &#125;</span><br><span class="css"></span><br><span class="css">        <span class="hljs-selector-class">.aaa-enter-active</span>,</span><br><span class="css">        <span class="hljs-selector-class">.aaa-leave-active</span> &#123;</span><br><span class="css">            <span class="hljs-attribute">transition</span>: all <span class="hljs-number">1s</span> linear;</span><br><span class="css">        &#125;</span><br><span class="css">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;app&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">&quot;add&quot;</span>&gt;</span>+<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">&quot;sub&quot;</span>&gt;</span>-<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">hr</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">transition-group</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;aaa&quot;</span> <span class="hljs-attr">tag</span>=<span class="hljs-string">&quot;ul&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;list-box&quot;</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">v-for</span>=<span class="hljs-string">&quot;(item,index) in numList&quot;</span> <span class="hljs-attr">:key</span>=<span class="hljs-string">&quot;item+&#x27;aaa&#x27;&quot;</span>&gt;</span>&#123;&#123;item&#125;&#125;<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">transition-group</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./js/vue.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    <span class="hljs-keyword">new</span> Vue(&#123;</span><br><span class="javascript">        <span class="hljs-attr">el</span>: <span class="hljs-string">&quot;#app&quot;</span>,</span><br><span class="javascript">        <span class="hljs-attr">data</span>: &#123;</span><br><span class="javascript">            <span class="hljs-attr">numList</span>: [<span class="hljs-number">0</span>, <span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>]</span><br><span class="javascript">        &#125;,</span><br><span class="javascript">        <span class="hljs-attr">methods</span>: &#123;</span><br><span class="javascript">            <span class="hljs-function"><span class="hljs-title">add</span>(<span class="hljs-params"></span>)</span> &#123;</span><br><span class="javascript">                <span class="hljs-built_in">this</span>.numList.push(<span class="hljs-built_in">this</span>.numList.length);</span><br><span class="javascript">            &#125;,</span><br><span class="javascript">            <span class="hljs-function"><span class="hljs-title">sub</span>(<span class="hljs-params"></span>)</span> &#123;</span><br><span class="javascript">                <span class="hljs-keyword">let</span> index = <span class="hljs-built_in">parseInt</span>(<span class="hljs-built_in">Math</span>.random() * <span class="hljs-built_in">this</span>.numList.length);</span><br><span class="javascript">                <span class="hljs-built_in">this</span>.numList.splice(index, <span class="hljs-number">1</span>);</span><br><span class="javascript">            &#125;</span><br><span class="javascript"></span><br><span class="javascript">        &#125;</span><br><span class="javascript">    &#125;)</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p>如果我们将上面的渲染过程里在的<code>:key=&quot;index&quot;</code>，这样就实现不了我们的效果，因为vue在内部进行对比的时候找不到你的变化项（或者会把你的变化项判断错误）</p>
<h2 id="6-Vuex"><a href="#6-Vuex" class="headerlink" title="6. Vuex"></a>6. Vuex</h2><h3 id="一、什么需要全局状态"><a href="#一、什么需要全局状态" class="headerlink" title="一、什么需要全局状态"></a>一、什么需要全局状态</h3><img src="https://gitee.com/lovesnsfi_admin/images4mk/raw/master/2021/image-20211118084140393.png" srcset="/blog/img/loading.gif" lazyload alt="image-20211118084140393" style="zoom:50%;" />

<p>如上图所示，对于上面的页在页面结构，如果<code>App.vue</code>里面的数据需要传递到子级组件晚们可以使用自定义属性去传递</p>
<p><strong>App.vue代码</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">login</span> <span class="hljs-attr">user-name</span>=<span class="hljs-string">&#x27;张三&#x27;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">login</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">register</span> <span class="hljs-attr">user-name</span>=<span class="hljs-string">&#x27;张三&#x27;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">register</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p>对于这样的父子结构，我们使用这一种自定义的属性传递是非常方便的</p>
<p>但是在大型的项目里面，总会有一些复杂的布局，如下图所示</p>
<img src="https://gitee.com/lovesnsfi_admin/images4mk/raw/master/2021/image-20211118084427149.png" srcset="/blog/img/loading.gif" lazyload alt="image-20211118084427149" style="zoom:50%;" />

<p> 上图中我们可以看到<code>login.vue</code>的组件里面有一个<code>user-item.vue</code>的组件，这个组件的内部有一个<code>register.vue</code>组件，它有一个数据<code>nickName</code>想传递给<code>register.vue</code>使用，怎么办呢？这个时候以目前技术来说我们不好实现</p>
<h3 id="二、vue的全局状态管理工具"><a href="#二、vue的全局状态管理工具" class="headerlink" title="二、vue的全局状态管理工具"></a>二、vue的全局状态管理工具</h3><p><img src="https://gitee.com/lovesnsfi_admin/images4mk/raw/master/2021/image-20211118084852676.png" srcset="/blog/img/loading.gif" lazyload alt="image-20211118084852676"></p>
<p>这种东西在vue里面叫全局状态管理，它有一个专门包去实现，叫<code>vuex</code></p>
<p>vue的全局状态管理工具叫vuex，它内部有一套完整的状态管理机制，可以轻松的实现全局状态渲染组件，改变等操作</p>
<h3 id="三、vuex的安装"><a href="#三、vuex的安装" class="headerlink" title="三、vuex的安装"></a>三、vuex的安装</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs bash">$ npm install vuex<br>$ yarn add vuex<br></code></pre></td></tr></table></figure>

<p>它的安装非常简单，它可以在脚手里面使用，也可以在普通的页面上面使用，只是在webpack的脚手架里面使用的时候会有更多的功能</p>
<h3 id="四、vuex的内部原理"><a href="#四、vuex的内部原理" class="headerlink" title="四、vuex的内部原理"></a>四、vuex的内部原理</h3><p>在没有vuex的情况下</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;app&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">one</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">two</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">two</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">one</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">three</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">three</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>    <br>    <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;temp1&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;box&quot;</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>我是第一个组件<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">slot</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">slot</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;temp2&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;box&quot;</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>我是第二个组件<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>&#123;&#123;nickName&#125;&#125;<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">slot</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">slot</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;temp3&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;box&quot;</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>我是第三个组件<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">slot</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">slot</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./js/vue.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    Vue.component(<span class="hljs-string">&quot;one&quot;</span>,&#123;</span><br><span class="javascript">        <span class="hljs-attr">template</span>:<span class="hljs-string">&quot;#temp1&quot;</span></span><br><span class="javascript">    &#125;);</span><br><span class="javascript">    Vue.component(<span class="hljs-string">&quot;two&quot;</span>,&#123;</span><br><span class="javascript">        <span class="hljs-attr">template</span>:<span class="hljs-string">&quot;#temp2&quot;</span>,</span><br><span class="javascript">        <span class="hljs-function"><span class="hljs-title">data</span>(<span class="hljs-params"></span>)</span>&#123;</span><br><span class="javascript">            <span class="hljs-keyword">return</span> &#123;</span><br><span class="javascript">                <span class="hljs-attr">nickName</span>:<span class="hljs-string">&quot;张三&quot;</span></span><br><span class="javascript">            &#125;</span><br><span class="javascript">        &#125;</span><br><span class="javascript">    &#125;);</span><br><span class="javascript">    Vue.component(<span class="hljs-string">&quot;three&quot;</span>,&#123;</span><br><span class="javascript">        <span class="hljs-attr">template</span>:<span class="hljs-string">&quot;#temp3&quot;</span></span><br><span class="javascript">    &#125;);</span><br><span class="javascript">    <span class="hljs-keyword">new</span> Vue(&#123;</span><br><span class="javascript">        <span class="hljs-attr">el</span>:<span class="hljs-string">&quot;#app&quot;</span></span><br><span class="javascript">    &#125;)</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<img src="https://gitee.com/lovesnsfi_admin/images4mk/raw/master/2021/image-20211118085743400.png" srcset="/blog/img/loading.gif" lazyload alt="image-20211118085743400" style="zoom:50%;" />

<p> 如上图所示，如果我们想把<code>two</code>这个组件内部的数据<code>nickName</code> 传递给<code>three</code>这个组件，这样非常麻烦</p>
<p><strong>vuex的创建</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">const</span> store = <span class="hljs-keyword">new</span> Vuex.Store(&#123;<br>    <span class="hljs-attr">state</span>:&#123;&#125;,<br>    <span class="hljs-attr">mutations</span>:&#123;&#125;,<br>    <span class="hljs-attr">actions</span>:&#123;&#125;,<br>    <span class="hljs-attr">getters</span>:&#123;&#125;,<br>    <span class="hljs-attr">plugins</span>:[]<br>&#125;);<br><br><span class="hljs-keyword">new</span> Vue(&#123;<br>    <span class="hljs-attr">el</span>:<span class="hljs-string">&quot;#app&quot;</span>,<br>    store<br>&#125;)<br></code></pre></td></tr></table></figure>

<blockquote>
<p>这个store就是全局区域</p>
</blockquote>
<p><img src="https://pic.imgdb.cn/item/619edf892ab3f51d91e119b5.png" srcset="/blog/img/loading.gif" lazyload alt="image-20211118091010008"></p>
<p>当一个vue加载了<code>vuex</code>的store以后，在内部就会有一个<code>$store</code>的属性，这个属性就是用于操控全局状态的</p>
<h4 id="1-state状态"><a href="#1-state状态" class="headerlink" title="1. state状态"></a>1. state状态</h4><p>在vuex内部，这个<code>state</code>是用于存储状态的（通俗一点就是用于存储全局变量的），相当于组件内部的<code>data</code>属性</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs javascript">state:&#123;<br>    <span class="hljs-attr">nickName</span>:<span class="hljs-string">&quot;小珊子&quot;</span><br>&#125;<br></code></pre></td></tr></table></figure>

<p>如果在某一个组件里面可以下面的方式使用全局状态</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">h3</span>&gt;</span>&#123;&#123;$store.state.nickName&#125;&#125;<span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span><br></code></pre></td></tr></table></figure>

<h4 id="2-mutations转变"><a href="#2-mutations转变" class="headerlink" title="2. mutations转变"></a>2. mutations转变</h4><p>vuex的状态state相当于组件内部的data,竟然是变量就可以改变，所以如果改变<code>vuex</code>内部的state的数据呢</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><code class="hljs javascript">Vue.component(<span class="hljs-string">&quot;two&quot;</span>, &#123;<br>    <span class="hljs-attr">template</span>: <span class="hljs-string">&quot;#temp2&quot;</span>,<br>    <span class="hljs-attr">methods</span>:&#123;<br>        <span class="hljs-function"><span class="hljs-title">changeNickName</span>(<span class="hljs-params"></span>)</span>&#123;<br>            <span class="hljs-comment">//这种写法就是不对的</span><br>            <span class="hljs-built_in">this</span>.$store.state.nickName = <span class="hljs-string">&quot;帅哥哥&quot;</span>;<br>        &#125;<br>    &#125;<br>&#125;);<br></code></pre></td></tr></table></figure>

<p>在上面的代码当中，如果直接 这么改变是不对的，因为<code>state</code>是全局的，在所有的地方都可以改变，在某些特殊的时候就会出现冲突的情况，如a组件要改变nickName,b组件也要改变nickName，那么到底先执行哪一步操作呢</p>
<p>vuex的内部，状态的改变量个完整的运行流程图</p>
<p><img src="https://gitee.com/lovesnsfi_admin/images4mk/raw/master/2021/vuex%E5%9B%BE%E8%A7%A3-16371984478701.jpg" srcset="/blog/img/loading.gif" lazyload alt="vuex图解"></p>
<p>上面就是一个vue的运行原理图，我把它理解为下面的情况</p>
<p><img src="https://gitee.com/lovesnsfi_admin/images4mk/raw/master/2021/image-20211118093256358.png" srcset="/blog/img/loading.gif" lazyload alt="image-20211118093256358"></p>
<p>在上面的流程图里面，我们可以看到，如果要改变某一个状态，<code>components</code>里面是不能够直接改变的，必须<code>mutations</code>去改变</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">// 锦衣卫</span><br><span class="hljs-attr">mutations</span>:&#123;<br>    <span class="hljs-function"><span class="hljs-title">setNickName</span>(<span class="hljs-params">state,nickName</span>)</span>&#123;<br>        state.nickName = nickName;<br>    &#125;<br>&#125;,<br></code></pre></td></tr></table></figure>

<blockquote>
<p>mutations的方法当中，这个方法名可以随便到，方法所接收到的第一个参数是 vuex系统自动给你注入的state</p>
</blockquote>
<h4 id="3-actions方法"><a href="#3-actions方法" class="headerlink" title="3. actions方法"></a>3. actions方法</h4><p>同理，如果<code>muations</code>想做出相应的改变，它也要有别人让它做改变，这个时候就要收<code>actions</code>提交一个任务过去</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">// 太监</span><br><span class="hljs-attr">actions</span>:&#123;<br>    <span class="hljs-function"><span class="hljs-title">setNickName</span>(<span class="hljs-params">&#123;commit&#125;,nickName</span>)</span>&#123;<br>        commit(<span class="hljs-string">&quot;setNickName&quot;</span>,nickName)<br>    &#125;<br>&#125;<br></code></pre></td></tr></table></figure>

<blockquote>
<p>actions里面的方法名也可以随便取，这个方法所接收到的第一个参数要解构出一个<code>commit</code>的方法，提交<code>mutations</code></p>
</blockquote>
<p>我们一旦完成上面的操作过程以后，如果们需要改变<code>vuex</code>的状态，则应该使用下面的方法</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-built_in">this</span>.$store.dispatch(<span class="hljs-string">&quot;setNickName&quot;</span>,<span class="hljs-string">&quot;我是nickName更新的值&quot;</span>);<br></code></pre></td></tr></table></figure>

<h4 id="4-getter获取"><a href="#4-getter获取" class="headerlink" title="4.getter获取"></a>4.getter获取</h4><p>这个相当于vuex内部的计算属性，如下所示</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">const</span> store = <span class="hljs-keyword">new</span> Vuex.Store(&#123;<br>    <span class="hljs-comment">// 大臣</span><br>    <span class="hljs-attr">state</span>: &#123;<br>        <span class="hljs-attr">nickName</span>: <span class="hljs-string">&quot;小珊子&quot;</span>,<br>        <span class="hljs-attr">age</span>: <span class="hljs-number">22</span><br>    &#125;,<br>    <span class="hljs-comment">//相当于组件内部地计算属性</span><br>    <span class="hljs-attr">getters</span>: &#123;<br>        <span class="hljs-function"><span class="hljs-title">adult</span>(<span class="hljs-params">state</span>)</span> &#123;<br>            <span class="hljs-keyword">return</span> state.age &gt;= <span class="hljs-number">18</span> ? <span class="hljs-string">&quot;成年&quot;</span> : <span class="hljs-string">&quot;未成年&quot;</span><br>        &#125;<br>    &#125;<br>&#125;)<br></code></pre></td></tr></table></figure>

<p>后面在使用的时候直接 使用</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span><br>    &#123;&#123;$store.getters.adult&#125;&#125;<br><span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span><br></code></pre></td></tr></table></figure>

<blockquote>
<p><code>getters</code>本身是一个方法，返回一个值，这个方法第一个参数是vuex系统内部注入的<code>state</code>状态</p>
</blockquote>
<p><strong>完整代码</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-meta-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;zh&quot;</span>&gt;</span><br><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">http-equiv</span>=<span class="hljs-string">&quot;X-UA-Compatible&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;IE=edge&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;viewport&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>vuex<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="css"></span><br><span class="css">        <span class="hljs-selector-class">.box</span> &#123;</span><br><span class="css">            <span class="hljs-attribute">border</span>: <span class="hljs-number">1px</span> solid black;</span><br><span class="css">            <span class="hljs-attribute">margin</span>: <span class="hljs-number">5px</span>;</span><br><span class="css">            <span class="hljs-attribute">padding</span>: <span class="hljs-number">5px</span>;</span><br><span class="css">        &#125;</span><br><span class="css">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;app&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">one</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">two</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">two</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">one</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">three</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">three</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;temp1&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;box&quot;</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>我是第一个组件<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">h3</span>&gt;</span>&#123;&#123;$store.state.nickName&#125;&#125;<span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>年龄：&#123;&#123;$store.state.age&#125;&#125;<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">slot</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">slot</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;temp2&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;box&quot;</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>我是第二个组件<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">h3</span>&gt;</span>&#123;&#123;$store.state.nickName&#125;&#125;<span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>年龄：&#123;&#123;$store.state.age&#125;&#125;<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">&quot;changeNickName&quot;</span>&gt;</span>我要必变nickName<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">slot</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">slot</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;temp3&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;box&quot;</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>我是第三个组件<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">h3</span>&gt;</span>&#123;&#123;$store.state.nickName&#125;&#125;<span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>年龄：&#123;&#123;$store.state.age&#125;&#125;<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>&#123;&#123;$store.getters.adult&#125;&#125;<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">slot</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">slot</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./js/vue.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./js/vuex.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    Vue.component(<span class="hljs-string">&quot;one&quot;</span>, &#123;</span><br><span class="javascript">        <span class="hljs-attr">template</span>: <span class="hljs-string">&quot;#temp1&quot;</span></span><br><span class="javascript">    &#125;);</span><br><span class="javascript">    Vue.component(<span class="hljs-string">&quot;two&quot;</span>, &#123;</span><br><span class="javascript">        <span class="hljs-attr">template</span>: <span class="hljs-string">&quot;#temp2&quot;</span>,</span><br><span class="javascript">        <span class="hljs-attr">methods</span>: &#123;</span><br><span class="javascript">            <span class="hljs-function"><span class="hljs-title">changeNickName</span>(<span class="hljs-params"></span>)</span> &#123;</span><br><span class="javascript">                <span class="hljs-built_in">this</span>.$store.dispatch(<span class="hljs-string">&quot;setNickName&quot;</span>, <span class="hljs-string">&quot;我是通过vuex改变的值&quot;</span>);</span><br><span class="javascript">            &#125;</span><br><span class="javascript">        &#125;</span><br><span class="javascript">    &#125;);</span><br><span class="javascript">    Vue.component(<span class="hljs-string">&quot;three&quot;</span>, &#123;</span><br><span class="javascript">        <span class="hljs-attr">template</span>: <span class="hljs-string">&quot;#temp3&quot;</span></span><br><span class="javascript">    &#125;);</span><br><span class="javascript"></span><br><span class="javascript">    <span class="hljs-keyword">const</span> store = <span class="hljs-keyword">new</span> Vuex.Store(&#123;</span><br><span class="javascript">        <span class="hljs-comment">// 大臣</span></span><br><span class="javascript">        <span class="hljs-attr">state</span>: &#123;</span><br><span class="javascript">            <span class="hljs-attr">nickName</span>: <span class="hljs-string">&quot;小珊子&quot;</span>,</span><br><span class="javascript">            <span class="hljs-attr">age</span>: <span class="hljs-number">22</span></span><br><span class="javascript">        &#125;,</span><br><span class="javascript">        <span class="hljs-comment">// 锦衣卫</span></span><br><span class="javascript">        <span class="hljs-attr">mutations</span>: &#123;</span><br><span class="javascript">            <span class="hljs-function"><span class="hljs-title">setNickName</span>(<span class="hljs-params">state, nickName</span>)</span> &#123;</span><br><span class="javascript">                state.nickName = nickName;</span><br><span class="javascript">            &#125;</span><br><span class="javascript">        &#125;,</span><br><span class="javascript">        <span class="hljs-comment">// 太监</span></span><br><span class="javascript">        <span class="hljs-attr">actions</span>: &#123;</span><br><span class="javascript">            <span class="hljs-function"><span class="hljs-title">setNickName</span>(<span class="hljs-params">&#123;</span></span></span><br><span class="hljs-params"><span class="hljs-function"><span class="javascript">                commit</span></span></span><br><span class="hljs-params"><span class="hljs-function"><span class="javascript">            &#125;, nickName</span>)</span> &#123;</span><br><span class="javascript">                commit(<span class="hljs-string">&quot;setNickName&quot;</span>, nickName)</span><br><span class="javascript">            &#125;</span><br><span class="javascript">        &#125;,</span><br><span class="javascript">        <span class="hljs-comment">//相当于组件内部地计算属性</span></span><br><span class="javascript">        <span class="hljs-attr">getters</span>: &#123;</span><br><span class="javascript">            <span class="hljs-function"><span class="hljs-title">adult</span>(<span class="hljs-params">state</span>)</span> &#123;</span><br><span class="javascript">                <span class="hljs-keyword">return</span> state.age &gt;= <span class="hljs-number">18</span> ? <span class="hljs-string">&quot;成年&quot;</span> : <span class="hljs-string">&quot;未成年&quot;</span></span><br><span class="javascript">            &#125;</span><br><span class="javascript">        &#125;</span><br><span class="javascript">    &#125;)</span><br><span class="javascript">    <span class="hljs-keyword">const</span> app = <span class="hljs-keyword">new</span> Vue(&#123;</span><br><span class="javascript">        <span class="hljs-attr">el</span>: <span class="hljs-string">&quot;#app&quot;</span>,</span><br><span class="javascript">        store</span><br><span class="javascript">    &#125;)</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>

<h3 id="五、vuex中的mapGetter等使用"><a href="#五、vuex中的mapGetter等使用" class="headerlink" title="五、vuex中的mapGetter等使用"></a>五、vuex中的mapGetter等使用</h3><p>在之前上面讲到，我们vuex的使用有下面几种方式</p>
<ol>
<li><p><code>state</code></p>
<p>组件内部</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span><br>    &#123;&#123;$store.state.属性名&#125;&#125;<br><span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span><br></code></pre></td></tr></table></figure>
</li>
<li><p><code>getters</code></p>
<p>组件内部</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span><br>    &#123;&#123;$store.getters.属性名&#125;&#125;<br><span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span><br></code></pre></td></tr></table></figure>
</li>
<li><p><code>actions</code></p>
<p>组件内部</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-built_in">this</span>.$store.dispatch(<span class="hljs-string">&quot;action名称&quot;</span>,参数);<br></code></pre></td></tr></table></figure>

</li>
</ol>
<p>上面这些都是最原始的方法，其实因为vuex的使用是非常繁琐的，所以vuex的内部提供了另一种快速操作的方法</p>
<ol>
<li><code>mapState</code>用于快速获取状态<code>state</code></li>
<li><code>mapGetters</code>用于快速获取<code>getters</code>计算属性</li>
<li><code>mapActions</code>用于快速获取<code>actions</code>方法</li>
</ol>
<p>这三个东西在普通模式下面使用不了，必须在ESModule或webpack下面使用，现在的vue脚手架项目都是基于ESModule的webpack项目，所以我们是可以直接去使用的</p>
<blockquote>
<p>其实在这里，标哥单独给你们讲一下，我们现的vue可以在浏览器模块 webapck的ESModule环境，所以我们现在可以先在浏览器的环境下面来学习上面的三个方法</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./js/xxx.js&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text/javascript&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p>现在在新版的浏览器里面，可以使用下面的试试</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./js/xxx.js&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;module&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p>正是因为有了这种新版的写法，所以我们可以在浏览器的环境下面模拟 webpack的ESModule来开发学习</p>
</blockquote>
<p><strong>完整代码案例</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-meta-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;zh&quot;</span>&gt;</span><br><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">http-equiv</span>=<span class="hljs-string">&quot;X-UA-Compatible&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;IE=edge&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;viewport&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>vuex高级用法<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="css"></span><br><span class="css">        <span class="hljs-selector-class">.box</span> &#123;</span><br><span class="css">            <span class="hljs-attribute">border</span>: <span class="hljs-number">1px</span> solid black;</span><br><span class="css">            <span class="hljs-attribute">margin</span>: <span class="hljs-number">5px</span>;</span><br><span class="css">            <span class="hljs-attribute">padding</span>: <span class="hljs-number">5px</span>;</span><br><span class="css">        &#125;</span><br><span class="css">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;app&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">one</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">two</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">two</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">one</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">three</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">three</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;temp1&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;box&quot;</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>第一个组件<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>昵称：&#123;&#123;nickName&#125;&#125;<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">slot</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">slot</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;temp2&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;box&quot;</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>第二个组件<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>年龄：&#123;&#123;age&#125;&#125;<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">&quot;changeNickName&quot;</span>&gt;</span>我要改变昵称<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">slot</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">slot</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;temp3&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;box&quot;</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>第三个组件<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>昵称：&#123;&#123;nickName&#125;&#125;<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>年龄：&#123;&#123;age&#125;&#125;<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>状态：&#123;&#123;adult&#125;&#125;<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">slot</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">slot</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;module&quot;</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    <span class="hljs-keyword">import</span> Vue <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;./js/vue.esm.browser.js&quot;</span>;</span><br><span class="javascript">    <span class="hljs-keyword">import</span> Vuex,&#123;mapState,mapGetters,mapActions&#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;./js/vuex.esm.browser.js&quot;</span>;</span><br><span class="javascript">    <span class="hljs-comment">//这里一定要注意，因为我们在模块脚手架的环境</span></span><br><span class="javascript">    Vue.use(Vuex);</span><br><span class="javascript"></span><br><span class="javascript">    Vue.component(<span class="hljs-string">&quot;one&quot;</span>,&#123;</span><br><span class="javascript">        <span class="hljs-attr">template</span>:<span class="hljs-string">&quot;#temp1&quot;</span>,</span><br><span class="javascript">        <span class="hljs-attr">computed</span>:&#123;</span><br><span class="javascript">            ...mapState([<span class="hljs-string">&quot;nickName&quot;</span>])</span><br><span class="javascript">        &#125;</span><br><span class="javascript">    &#125;);</span><br><span class="javascript">    Vue.component(<span class="hljs-string">&quot;two&quot;</span>,&#123;</span><br><span class="javascript">        <span class="hljs-attr">template</span>:<span class="hljs-string">&quot;#temp2&quot;</span>,</span><br><span class="javascript">        <span class="hljs-attr">computed</span>:&#123;</span><br><span class="javascript">            ...mapState([<span class="hljs-string">&quot;age&quot;</span>])</span><br><span class="javascript">        &#125;,</span><br><span class="javascript">        <span class="hljs-attr">methods</span>:&#123;</span><br><span class="javascript">            ...mapActions([<span class="hljs-string">&quot;setNickName&quot;</span>]),</span><br><span class="javascript">            <span class="hljs-function"><span class="hljs-title">changeNickName</span>(<span class="hljs-params"></span>)</span>&#123;</span><br><span class="javascript">                <span class="hljs-comment">// this.$store.dispatch(&quot;setNickName&quot;,&quot;我要改你的值&quot;);</span></span><br><span class="javascript">                <span class="hljs-built_in">this</span>.setNickName(<span class="hljs-string">&quot;哈哈，我现在要改变你的值 ，就快多了&quot;</span>);</span><br><span class="javascript">            &#125;</span><br><span class="javascript">        &#125;</span><br><span class="javascript">    &#125;);</span><br><span class="javascript">    Vue.component(<span class="hljs-string">&quot;three&quot;</span>,&#123;</span><br><span class="javascript">        <span class="hljs-attr">template</span>:<span class="hljs-string">&quot;#temp3&quot;</span>,</span><br><span class="javascript">        <span class="hljs-attr">computed</span>:&#123;</span><br><span class="javascript">            ...mapState([<span class="hljs-string">&quot;nickName&quot;</span>,<span class="hljs-string">&quot;age&quot;</span>]),</span><br><span class="javascript">            ...mapGetters([<span class="hljs-string">&quot;adult&quot;</span>])</span><br><span class="javascript">        &#125;</span><br><span class="javascript">    &#125;);</span><br><span class="javascript"></span><br><span class="javascript">    <span class="hljs-keyword">const</span> store = <span class="hljs-keyword">new</span> Vuex.Store(&#123;</span><br><span class="javascript">        <span class="hljs-attr">state</span>:&#123;</span><br><span class="javascript">            <span class="hljs-attr">nickName</span>:<span class="hljs-string">&quot;张三丰&quot;</span>,</span><br><span class="javascript">            <span class="hljs-attr">age</span>:<span class="hljs-number">22</span></span><br><span class="javascript">        &#125;,</span><br><span class="javascript">        <span class="hljs-attr">mutations</span>:&#123;</span><br><span class="javascript">            <span class="hljs-function"><span class="hljs-title">setNickName</span>(<span class="hljs-params">state,nickName</span>)</span>&#123;</span><br><span class="javascript">                state.nickName = nickName;</span><br><span class="javascript">            &#125;</span><br><span class="javascript">        &#125;,</span><br><span class="javascript">        <span class="hljs-attr">actions</span>:&#123;</span><br><span class="javascript">            <span class="hljs-function"><span class="hljs-title">setNickName</span>(<span class="hljs-params">&#123;commit&#125;,nickName</span>)</span>&#123;</span><br><span class="javascript">                commit(<span class="hljs-string">&quot;setNickName&quot;</span>,nickName)</span><br><span class="javascript">            &#125;</span><br><span class="javascript">        &#125;,</span><br><span class="javascript">        <span class="hljs-attr">getters</span>:&#123;</span><br><span class="javascript">            <span class="hljs-function"><span class="hljs-title">adult</span>(<span class="hljs-params">state</span>)</span>&#123;</span><br><span class="javascript">                <span class="hljs-keyword">return</span> state.age&gt;<span class="hljs-number">18</span>?<span class="hljs-string">&quot;成年&quot;</span>:<span class="hljs-string">&quot;小屁孩&quot;</span></span><br><span class="javascript">            &#125;</span><br><span class="javascript">        &#125;</span><br><span class="javascript">    &#125;)</span><br><span class="javascript">    </span><br><span class="javascript">    <span class="hljs-keyword">new</span> Vue(&#123;</span><br><span class="javascript">        <span class="hljs-attr">el</span>:<span class="hljs-string">&quot;#app&quot;</span>,</span><br><span class="javascript">        store</span><br><span class="javascript">    &#125;)</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>

<h3 id="六、vuex状态持久化"><a href="#六、vuex状态持久化" class="headerlink" title="六、vuex状态持久化"></a>六、vuex状态持久化</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs bash">npm install vuex-persistedstate --save<br></code></pre></td></tr></table></figure>

<ul>
<li>引入及配置：在<code>store</code>下的<code>index.js</code>中</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">import</span> createPersistedState <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;vuex-persistedstate&quot;</span><br><span class="hljs-keyword">const</span> store =Vuex.Store(&#123;<br> <span class="hljs-attr">state</span>: &#123;&#125;,<br> <span class="hljs-attr">mutations</span>: &#123;&#125;,<br> <span class="hljs-attr">actions</span>: &#123;&#125;,<br> <span class="hljs-attr">plugins</span>: [createPersistedState()]   <span class="hljs-comment">//使用插件   默认localstorage</span><br>&#125;)<br></code></pre></td></tr></table></figure>

<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">import</span> createPersistedState <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;vuex-persistedstate&quot;</span><br><span class="hljs-keyword">const</span> store = Vuex.Store(&#123;<br>   <span class="hljs-attr">state</span>: &#123;&#125;,<br>   <span class="hljs-attr">mutations</span>: &#123;&#125;,<br>   <span class="hljs-attr">actions</span>: &#123;&#125;,<br>   <span class="hljs-attr">plugins</span>: [createPersistedState(&#123;<br>       <span class="hljs-attr">storage</span>:<span class="hljs-built_in">window</span>.sessionStorage   <span class="hljs-comment">//改成 sessionStorage 存储</span><br>   &#125;)] <br>&#125;)<br></code></pre></td></tr></table></figure>

<p><a target="_blank" rel="noopener" href="https://www.jianshu.com/p/04c288731819">Vuex状态持久化-简书</a></p>

            </div>
            <hr>
            <div>
              <div class="post-metas mb-3">
                
                  <div class="post-meta mr-3">
                    <i class="iconfont icon-category"></i>
                    
                      <a class="hover-with-bg" href="/blog/categories/%E5%89%8D%E7%AB%AF%E7%AC%94%E8%AE%B0/">前端笔记</a>
                    
                  </div>
                
                
                  <div class="post-meta">
                    <i class="iconfont icon-tags"></i>
                    
                      <a class="hover-with-bg" href="/blog/tags/CSS/">CSS</a>
                    
                      <a class="hover-with-bg" href="/blog/tags/JavaScript/">JavaScript</a>
                    
                      <a class="hover-with-bg" href="/blog/tags/ES6/">ES6</a>
                    
                      <a class="hover-with-bg" href="/blog/tags/CSS3/">CSS3</a>
                    
                      <a class="hover-with-bg" href="/blog/tags/Sass/">Sass</a>
                    
                  </div>
                
              </div>
              
                <p class="note note-warning">
                  
                    本博客所有文章除特别声明外，均采用 <a target="_blank" href="https://creativecommons.org/licenses/by-sa/4.0/deed.zh" rel="nofollow noopener noopener">CC BY-SA 4.0 协议</a> ，转载请注明出处！
                  
                </p>
              
              
                <div class="post-prevnext">
                  <article class="post-prev col-6">
                    
                    
                      <a href="/blog/2021/12/02/webpack%E7%AC%94%E8%AE%B0/">
                        <i class="iconfont icon-arrowleft"></i>
                        <span class="hidden-mobile">webpack</span>
                        <span class="visible-mobile">上一篇</span>
                      </a>
                    
                  </article>
                  <article class="post-next col-6">
                    
                    
                      <a href="/blog/2021/11/17/Sass-css%E6%8B%93%E5%B1%95%E8%AF%AD%E8%A8%80/">
                        <span class="hidden-mobile">Sass-css拓展语言</span>
                        <span class="visible-mobile">下一篇</span>
                        <i class="iconfont icon-arrowright"></i>
                      </a>
                    
                  </article>
                </div>
              
            </div>

            
          </article>
        </div>
      </div>
    </div>
    
      <div class="d-none d-lg-block col-lg-2 toc-container" id="toc-ctn">
        <div id="toc">
  <p class="toc-header"><i class="iconfont icon-list"></i>&nbsp;目录</p>
  <div class="toc-body" id="toc-body"></div>
</div>

      </div>
    
  </div>
</div>

<!-- Custom -->


    

    
      <a id="scroll-top-button" href="#" role="button">
        <i class="iconfont icon-arrowup" aria-hidden="true"></i>
      </a>
    

    
      <div class="modal fade" id="modalSearch" tabindex="-1" role="dialog" aria-labelledby="ModalLabel"
     aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header text-center">
        <h4 class="modal-title w-100 font-weight-bold">搜索</h4>
        <button type="button" id="local-search-close" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body mx-3">
        <div class="md-form mb-5">
          <input type="text" id="local-search-input" class="form-control validate">
          <label data-error="x" data-success="v"
                 for="local-search-input">关键词</label>
        </div>
        <div class="list-group" id="local-search-result"></div>
      </div>
    </div>
  </div>
</div>
    

    
  </main>

  <footer class="text-center mt-5 py-3">
  <div class="footer-content">
     <a href="https://hexo.io" target="_blank" rel="nofollow noopener"><span>Hexo</span></a> <i class="iconfont icon-love"></i> <a href="https://github.com/fluid-dev/hexo-theme-fluid" target="_blank" rel="nofollow noopener"><span>Fluid</span></a> 
  </div>
  

  

  
</footer>


  <!-- SCRIPTS -->
  
  <script  src="https://cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.min.js" ></script>
  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.min.css" />

  <script>
    NProgress.configure({"showSpinner":false,"trickleSpeed":100})
    NProgress.start()
    window.addEventListener('load', function() {
      NProgress.done();
    })
  </script>


<script  src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js" ></script>
<script  src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" ></script>
<script  src="/blog/js/events.js" ></script>
<script  src="/blog/js/plugins.js" ></script>

<!-- Plugins -->


  
    <script  src="/blog/js/img-lazyload.js" ></script>
  



  



  <script  src="https://cdn.jsdelivr.net/npm/tocbot@4.12.3/dist/tocbot.min.js" ></script>



  <script  src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js" ></script>



  <script  src="https://cdn.jsdelivr.net/npm/anchor-js@4.3.1/anchor.min.js" ></script>



  <script defer src="https://cdn.jsdelivr.net/npm/clipboard@2.0.8/dist/clipboard.min.js" ></script>



  <script  src="/blog/js/local-search.js" ></script>






  <script  src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12/lib/typed.min.js" ></script>
  <script>
    (function (window, document) {
      var typing = Fluid.plugins.typing;
      var title = document.getElementById('subtitle').title;
      
      typing(title)
      
    })(window, document);
  </script>









  <script  src="https://cdn.jsdelivr.net/npm/mermaid@8.10.1/dist/mermaid.min.js" ></script>
  <script>
    if (window.mermaid) {
      mermaid.initialize({"theme":"default"});
    }
  </script>







<!-- 主题的启动项 保持在最底部 -->
<script  src="/blog/js/boot.js" ></script>


</body>
</html>
